Home > Others

jquery Lyrics sync Music player Plug-in demo demo

Source: Internet
Author: User
Tags setinterval hasownproperty
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

A jquery-based music player to share today is characterized by synchronized playback of lyrics and music, as well as the player's overall sophistication, which can be used as a player pendant for your blog.

HTML code

The code is as follows Copy Code

<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>jquery Lyrics sync Music player plug-in demo demo </title>
<meta name= "viewport" content= "Width=device-width, initial-scale=1.0" >
<link rel= "stylesheet" href= "Dist/aplayer.min.css" >
<style>
body{font-family: ' Helvetica neue ', Helvetica,arial,sans-serif; Container{max-width:32rem;margin-left:auto;margin-right:auto;} H1{font-size:54px;color: #333; margin:30px 0 10px;} H2{font-size:22px;color: #555;} H3{font-size:24px;color: #555;} Hr{display:block;width:7rem;height:1px;margin:2.5rem 0;background-color: #eee; border:0;} A{color: #08c; text-decoration:none;} p{font-size:18px;}
</style>
<body>
<div class= "Container" >

<div id= "Player3" class= "Aplayer" >
<pre class= "Aplayer-lrc-content" >
[TI: the Common Road]
[AR: Hackberry]
[Al: "After the" theme song]
[By: Zhou Min]

[00:00.00] Ordinary road-Hackberry


[00:04.01] Lyrics: Han Hanpao tree


[00:08.02] Composer: hackberry arranger: Hackberry


[00:12.02] Wandering on the road


[00:17.37] You want to go?


[00:23.2] The Fragile pride


[00:28.75] that was my image


[00:34.55] Boiling restless


[00:40.26] Where are you going?


[00:46] The mystery of the silent


[00:51.75] Are you really listening to the story?


[00:56.25] I have crossed the mountains and the sea


[00:59.55] also through the sea of crowds


[01:02.70] I used to have everything.


[01:05.00] In the twinkling of an eye is like smoke


[01:07.75] I've lost my disappointment and lost all direction


[01:13.46] until you see the ordinary is the only answer


[01:31.7] When you are still


[01:33.1] still in fantasy


[01:37.4] Your tomorrow


[01:43] is she going to be okay or worse?


[01:49.78] It's another day for me


[01:53.33] I've ruined everything for me.


[01:56.54] just want to leave forever


[01:59.82] I've been in the dark


[02:02.14] Struggling to get out of the way


[02:04.79] I used to be like you, like the weed and the wild flowers


[02:10.54] Desperate longing


[02:13.54] also cry and laugh ordinary


[03:03.38] go ahead and go


[03:06.23] Even if you've been given something


[03:09.08] go ahead and go


[03:11.83] Even if you're taken away from something


[03:14.78] go ahead and go


[03:17.58] Even if you're going to miss something,


[03:20.33] go ahead and go


[03:23.13] even if you would


[03:25.78] I have crossed the mountains and the sea


[03:28.14] also through the sea of crowds


[03:30.44] I used to have everything.


[03:33.69] In the twinkling of an eye is like smoke


[03:36.24] I've lost my disappointment and lost all direction


[03:42.04] until you see the ordinary is the only answer


[03:47.69] I've ruined everything for me.


[03:50.84] just want to leave forever


[03:53.39] I've been in the dark


[03:56.29] Struggling to get out of the way


[03:59.04] I used to be like you, like the weed and the wild flowers


[04:04.79] Desperate desire to cry also laugh ordinary


[04:10.64] I have crossed the mountains and the sea


[04:13.54] also through the sea of crowds


[04:16.14] I have asked the whole world


[04:19.49] never got the answer


[04:22.88] I'm just like you, like the weed and the wild flowers


[04:27.64] This is the only way I'm going to go.


[04:34.65] Time wordless


[04:36.15]


[04:40.3] Tomorrow is in front of you


[04:46.45] The wind blows the road still far


[04:51.55] Where is your story?


&lt;/pre&gt;


&lt;/div&gt;


&lt;h3&gt;wide style&lt;/h3&gt;


&lt;div id= "Player1" class= "Aplayer" &gt;&lt;/div&gt;


&lt;h3&gt;narrow style&lt;/h3&gt;


&lt;div id= "Player2" class= "Aplayer" &gt;&lt;/div&gt;


&lt;/div&gt;


&lt;script src= "Dist/aplayer.min.js" &gt;&lt;/script&gt;


&lt;script&gt;


var ap1 = new Aplayer ({


Element:document.getElementById (' Player1 '),


Narrow:false,


Autoplay:false,


Showlrc:false,


Music: {


Title: ' Sugar ',


Author: ' Maroon 5 ',


URL: ' Music/sugar.mp3 ',


Pic: ' Music/maroon5.jpg '


}


});


Ap1.init ();





var ap2 = new Aplayer ({


Element:document.getElementById (' Player2 '),


Narrow:true,


Autoplay:false,


Showlrc:false,


Music: {


Title: ' Sugar ',


Author: ' Maroon 5 ',


URL: ' Music/sugar.mp3 ',


Pic: ' Music/maroon5.jpg '


}


});


Ap2.init ();





var ap3 = new Aplayer ({


Element:document.getElementById (' Player3 '),


Narrow:false,


Autoplay:false,


Showlrc:true,


Music: {


Title: ' The road of mediocrity ',


Author: ' Park Tree ',


URL: ' Music/sugar.mp3 ',


Pic: ' Music/pf.jpg '


}


});


Ap3.init ();


&lt;/script&gt;

<div style= "text-align:center;clear:both;margin-top:50px" >

</div>
</body>

Aplayer.js Code

The code is as follows Copy Code

function Aplayer (e) {if (!) (! Music ' in e&amp;&amp; ' title ' in e.music&amp;&amp; ' author ' in e.music&amp;&amp; ' url ' in e.music&amp;&amp; ' pic ' in E.music ) throw "Aplayer Error:music, Music.title, Music.author, Music.url, music.pic are required in Options"; if (null=== e.element) throw "aplayer error:element option null"; This.ismobile=navigator.useragent.match (IPad) | ( IPhone) | (IPod) | (Android) | (WebOS)/i),this.ismobile&amp;&amp; (e.autoplay=!1); var a={element:document.getelementsbyclassname ("Aplayer") [0], Narrow:!1,autoplay:!1,showlrc:!1};for (Var t in a) A.hasownproperty (t) &amp;&amp;!e.hasownproperty (t) &amp;&amp; (E[T) =a[t]); This.option=e}aplayer.prototype.init=function () {function E (e) {var a=e| | Window.event,i= (A.clientx-t (P.bar))/y;i=i&gt;0?i:0,i=1&gt;i?i:1,p.updatebar.call (P, "played", I, "width"), P.option.showlrc&amp;&amp;p.updatelrc.call (P,parsefloat (p.playedbar.style.width)/100*p.audio.duration), P.element.getelementsbyclassname ("Aplayer-ptime") [0].innerhtml=p.secondtotime (I*p.audio.duration)}function A () { DOcument.removeeventlistener ("MouseUp", a), Document.removeeventlistener ("MouseMove", e), p.audio.currenttime= Parsefloat (P.playedbar.style.width)/100*p.audio.duration,p.play ()}function T (e) {for (Var a,t=e.offsetleft,i= e.offsetparent;null!==i) T+=i.offsetleft,i=i.offsetparent;return a=document.body.scrollleft+ Document.documentelement.scrollleft,t-a}function I (e) {for (var a,t=e.offsettop,i=e.offsetparent;null!==i;) t+= I.offsettop,i=i.offsetparent;return A=document.body.scrolltop+document.documentelement.scrolltop,t-a}if ( THIS.ELEMENT=THIS.OPTION.ELEMENT,THIS.MUSIC=THIS.OPTION.MUSIC,THIS.OPTION.SHOWLRC) {this.lrcTime=[], This.lrcline=[];for (Var l=this.element.getelementsbyclassname ("Aplayer-lrc-content") [0].innerHTML,s=l.split (/\n /), r=/\[(\d{2}):(\d{2}) \. (\d{2})] /,n=/] (. *) $/,o=/\[[a-za-z]+:/,d=0;d&lt;s.length;d++) {S[d]=s[d].replace (/^\s+|\s+$/g, ""), Var c=r.exec (s[d)), u= N.exec (S[d]); if (C&amp;&amp;u&amp;&amp;!n.exec (u[1)) This.lrcTime.push (60*parseint (c[1)) +parseint (c[2)) + parseint (C[3])/100), THIS.LRCLIne.push (u[1]); else if (S[d]&amp;&amp;!o.exec (s[d)) throw "Aplayer ERROR:LRC format error:should is like" [mm:ss.xx] Lyric ': +s[d]}}if (this.element.innerhtml= ' &lt;div class= "aplayer-pic" &gt;&lt;img src= "' +this.music.pic+ '" &gt; &lt;div class= "Aplayer-button aplayer-pause aplayer-hide" &gt;&lt;i class= "Demo-icon aplayer-icon-pause" &gt;&lt;/i &gt;&lt;/div&gt;&lt;div class= "Aplayer-button aplayer-play" &gt;&lt;i class= "Demo-icon aplayer-icon-play" &gt;&lt;/i &gt;&lt;/div&gt;&lt;/div&gt;&lt;div class= "Aplayer-info" &gt;&lt;div class= "Aplayer-music" &gt;&lt;span "class=" Aplayer-title "&gt; ' +this.music.title+ ' &lt;/span&gt;&lt;span class=" Aplayer-author "&gt;-(>?<) loading, very tired said ... &lt;/ Span&gt;&lt;/div&gt;&lt;div class= "APLAYER-LRC" &gt;&lt;div class= "aplayer-lrc-contents" style=: Translatey (0); " &gt;&lt;/div&gt;&lt;/div&gt;&lt;div class= "Aplayer-controller" &gt;&lt;div class= "Aplayer-bar-wrap" &gt;&lt;div class= "Aplayer-bar" &gt;&lt;div class= "aplayer-loaded" style= "width:0" &gt;&lt;/div&gt;&lt;div Class= "aplayer-played" style= "width:0" &gt;&lt;span class= "Aplayer-thumb" &gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt; &lt;/div&gt;&lt;div class= "Aplayer-time" &gt;-&lt;span class= "Aplayer-ptime" &gt;00:00&lt;/span&gt;/&lt;span class= "Aplayer-dtime" &gt; (o゚?゚) &lt;/span&gt;&lt;div class= "Aplayer-volume-wrap" &gt;&lt;i class= "Demo-icon" Aplayer-icon-volume-down "&gt;&lt;/i&gt;&lt;div class=" Aplayer-volume-bar-wrap "&gt;&lt;div class=" Aplayer-volume-bar "&gt;&lt;div class=" Aplayer-volume style= "height:80%" &gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt; &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt; ', THIS.OPTION.SHOWLRC) {This.element.classList.add (" APLAYER-WITHLRC "); var m=" "; for (This.lrccontents=this.element.getelementsbyclassname (" aplayer-lrc-contents ") [0], d=0;d&lt;this.lrcline.length;d++) m+= "&lt;p&gt;" +this.lrcline[d]+ "&lt;/p&gt;"; This.lrccontents.innerhtml=m, This.lrcindex=0,this.lrccontents.getelementsbytagname ("P") [0].classlist.add ("Aplayer-lrc-current")} This.option.narrow&amp;&amp;this.element.clasSlist.add ("Aplayer-narrow"), This.audio=document.createelement ("audio"), This.audio.src=this.music.url, this.audio.loop=!0,this.audio.preload= "metadata"; var p=this;this.audio.addeventlistener ("Durationchange", function () {1!==p.audio.duration&amp;&amp; (P.element.getelementsbyclassname ("Aplayer-dtime") [0].innerHTML= P.secondtotime (p.audio.duration))}), This.audio.addEventListener ("Loadedmetadata", function () { P.element.getelementsbyclassname ("Aplayer-author") [0].innerhtml= "-" +p.music.author,p.loadedtime=setinterval ( function () {var e=p.audio.buffered.end (p.audio.buffered.length-1)/p.audio.duration;p.updatebar.call (p, "loaded", E , "width"), 1===e&amp;&amp;clearinterval (P.loadedtime)},500)}), This.audio.addEventListener ("Error", function () { P.element.getelementsbyclassname ("Aplayer-author") [0].innerhtml=-Load Failed???}), this.playbutton= This.element.getElementsByClassName ("Aplayer-play") [0],this.pausebutton=this.element.getelementsbyclassname (" Aplayer-pause ") [0],this.playbutton.addeventlistener (" click ", FunCtion () {P.play.call (P)}), This.pauseButton.addEventListener ("click", Function () {P.pause.call (P)}), This.playedbar =this.element.getelementsbyclassname ("aplayer-played") [0],this.loadedbar=this.element.getelementsbyclassname (" Aplayer-loaded ") [0],this.thumb=this.element.getelementsbyclassname (" Aplayer-thumb ") [0],this.bar= This.element.getElementsByClassName ("Aplayer-bar") [0];var Y;this.bar.addeventlistener ("click", Function (e) {var a= e| | Window.event;y=p.bar.clientwidth;var i= (A.clientx-t (P.bar))/y;p.updatebar.call (P, "played", I, "width"), P.element.getelementsbyclassname ("Aplayer-ptime") [0].innerhtml=p.secondtotime (I*p.audio.duration), P.audio.currenttime=parsefloat (p.playedbar.style.width)/100*p.audio.duration}), This.thumb.addEventListener (" MouseDown ", function () {y=p.bar.clientwidth,clearinterval (p.playedtime), Document.addeventlistener (" MouseMove ", E) , Document.addeventlistener ("MouseUp", a)}), this.audio.volume=.8,this.volumebar= This.element.getElementsByClassName ("Aplayer-volume") [0];var h=this.elemenT.getelementsbyclassname ("Aplayer-volume-bar") [0],v=p.element.getelementsbyclassname ("Aplayer-time") [0]. getElementsByTagName ("i") [0],f=35;this.element.getelementsbyclassname ("Aplayer-volume-bar-wrap") [0]. AddEventListener ("click", Function (e) {var a=e| | Window.event,t= (F-a.clienty+i (h))/f;t=t&gt;0?t:0,t=1&gt;t?t:1,p.updatebar.call (P, "volume", t, "height"), p.audio.volume=t,p.audio.muted&amp;&amp; (p.audio.muted=!1), 1===t?v.classname= "Demo-icon aplayer-icon-volume-up" : v.classname= "Demo-icon Aplayer-icon-volume-down"}), V.addeventlistener ("click", Function () {p.audio.muted? ( P.audio.muted=!1,v.classname=1===p.audio.volume? " Demo-icon aplayer-icon-volume-up ": Demo-icon aplayer-icon-volume-down", P.updatebar.call (P, "volume"), P.audio.volume, "height")):(p.audio.muted=!0,v.classname= "Demo-icon aplayer-icon-volume-off", P.updateBar.call (P, "Volume", 0, "height")}), This.option.autoplay&amp;&amp;this.play ()},aplayer.prototype.play=function () { This.playButton.classList.add ("Aplayer-hide"), This.pauseButton.classList. Remove ("Aplayer-hide"), This.audio.play (), Var e=this;this.playedtime=setinterval (function () {E.updatebar.call E, "Played", E.audio.currenttime/e.audio.duration, "width"), E.option.showlrc&amp;&amp;e.updatelrc.call (E), E.element.getelementsbyclassname ("Aplayer-ptime") [0].innerhtml=e.secondtotime (E.audio.currenttime)},100)}, Aplayer.prototype.pause=function () {This.pauseButton.classList.add ("Aplayer-hide"), This.playButton.classList.remove ("Aplayer-hide"), This.audio.pause (), Clearinterval (This.playedtime)}, Aplayer.prototype.updatebar=function (e,a,t) {a=a&gt;0?a:0,a=1&gt;a?a:1,this[e+ "Bar"].style[t]=100*a+ "%"}, Aplayer.prototype.updatelrc=function (e) {if (e| | (e=this.audio.currenttime), e&lt;this.lrctime[this.lrcindex]| | E&gt;=this.lrctime[this.lrcindex+1]) for (Var a=0;a&lt;this.lrctime.length;a++) e&gt;=this.lrctime[a]&amp;&amp; (! this.lrctime[a+1]| | E&LT;THIS.LRCTIME[A+1]) &amp;&amp; (this.lrcindex=a,this.lrccontents.style.transform= "Translatey" +20*- this.lrcindex+ "px", this.lrcContents.getElementsByClassName("Aplayer-lrc-current") [0].classlist.remove ("Aplayer-lrc-current"), This.lrcContents.getElementsByTagName ("P") [A].classlist.add (" Aplayer-lrc-current "))},aplayer.prototype.secondtotime=function (e) {var a=function (e) {return 10&gt;e? 0 "+e:" "+e},t=parseint (E/60), I=parseint (e-60*t); return a (T) +": "+a (i)};

CSS Code

The code is as follows Copy Code

@font-face{font-family:aplayer-fontello;src:url (font/aplayer-fontello.eot?72550380); Src:url (font/ Aplayer-fontello.eot?72550380#iefix) format ("Embedded-opentype"), URL (font/aplayer-fontello.woff?72550380) format ("Woff"), URL (font/aplayer-fontello.ttf?72550380) format ("TrueType"), url (font/aplayer-fontello.svg?72550380# Fontello) format ("SVG"); Font-weight:400;font-style:normal}.aplayer-narrow{width:66px}.aplayer-narrow. Aplayer-info{display:none}.aplayer-withlrc.aplayer-narrow{width:106px}.aplayer-withlrc.aplayer. aplayer-pic{ Height:106px;width:106px}.aplayer-withlrc.aplayer. aplayer-info{margin-left:106px;height:106px}. Aplayer-withlrc.aplayer. aplayer-lrc{display:block}.aplayer{font-family:arial,helvetica,sans-serif;margin:5px;- webkit-box-shadow:0 2px 2px 0 Rgba (0,0,0,.14), 0 3px 1px-2px Rgba (0,0,0,.2), 0 1px 5px 0 rgba (0,0,0,.12); box-shadow:0 2px 2px 0 Rgba (0,0,0,.14), 0 3px 1px-2px Rgba (0,0,0,.2), 0 1px 5px 0 rgba (0,0,0,.12);-webkit-border-radius:2px;border-radi Us:2px;overflow:hidden;-webkiT-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.aplayer [class*= "aplayer-icon-" ]:before,.aplayer [class^=aplayer-icon-]:before{font-family:aplayer-fontello;font-style:normal;font-weight:400; Display:inline-block;text-decoration:inherit;width:1em;text-align:center;font-variant:normal;text-transform: None;line-height:1em}.aplayer. Aplayer-lrc-content,.aplayer. Aplayer-pic. Aplayer-hide{display:none}.aplayer. Aplayer-icon-weibo:before{content: ' \e805 '}.aplayer. Aplayer-icon-play:before{content: ' \e806 '}.aplayer. Aplayer-icon-pause:before{content: ' \e807 '}.aplayer. Aplayer-icon-to-start:before{content: ' \e808 '}.aplayer. Aplayer-icon-to-end:before{content: ' \e809 '}.aplayer. Aplayer-icon-list:before{content: ' \e80a '}.aplayer. Aplayer-icon-menu:before{content: ' \e80b '}.aplayer. Aplayer-icon-volume-off:before{content: ' \e800 '}.aplayer. Aplayer-icon-volume-down:before{content: ' \e801 '}.aplayer. Aplayer-icon-volume-up:before{content: ' \e802 '}. Aplayer Span{cursor:default!impoRtant}.aplayer. Aplayer-pic{position:relative;float:left;height:66px;width:66px}.aplayer. Aplayer-pic img{height : 100%;width:100%}.aplayer. Aplayer-pic. Aplayer-button{position:absolute;color: #fff;-webkit-border-radius:50%; border-radius:50%;opacity:.8;cursor:pointer;text-shadow:0 1px 1px rgba (0,0,0,.2);-webkit-box-shadow:0 1px 1px rgba (0,0,0,.2); box-shadow:0 1px 1px rgba (0,0,0,.2); Background:rgba (0,0,0,.2)}.aplayer. Aplayer-pic. Aplayer-button:hover{opacity:1}.aplayer. Aplayer-pic. aplayer-play{width:26px;height:26px;border:2px solid #fff; top:50%;left:50%;margin:-15px 0 0-15px}. Aplayer. Aplayer-pic. Aplayer-play. aplayer-icon-play{position:absolute;top:2px;left:4px;font-size:20px; Line-height:23px}.aplayer. Aplayer-pic. aplayer-pause{width:16px;height:16px;border:2px solid #fff; bottom:4px; Right:4px}.aplayer. Aplayer-pic. Aplayer-pause. aplayer-icon-pause{position:absolute;top:1px;left:2px;font-size : 12px;line-height:14px}.aplayer. aplayer-info{margin-left:66px;padding:14px 7px 0 10px;heiGht:66px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.aplayer. Aplayer-info. Aplayer-music{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-bottom:17px}.aplayer. Aplayer-info. Aplayer-music. Aplayer-title{font-size:14px}.aplayer aplayer-info aplayer-music. aplayer-author{ Font-size:12px;color: #666}.aplayer. aplayer-info. Aplayer-controller{position:relative}.aplayer. Aplayer-info. Aplayer-controller. aplayer-bar-wrap{margin:0 120px 0 5px}.aplayer. aplayer-info. Aplayer-controller aplayer-bar-wrap. aplayer-bar{position:relative;height:2px; Width:100%;background: #cdcdcd; cursor:pointer!important}.aplayer. Aplayer-info. Aplayer-controller. Aplayer-bar-wrap. Aplayer-bar. Aplayer-loaded{position:absolute;left:0;top:0;bottom:0;background: #aaa; height:2px ;-webkit-transition:all 5s Ease;transition:all. 5s Ease}.aplayer. Aplayer-info Aplayer-controller. Aplayer-bar-wrap . Aplayer-bar. aplayer-played{position:absolute;left:0;top:0;bottom:0;backgRound: #b7daff height:2px}.aplayer aplayer-info aplayer-controller aplayer-bar-wrap aplayer-bar. Aplayer-thumb{position:absolute;top:0;right:5px;margin-top:-4px;margin-right:-10px;height:8px;width:8px;border : 1px solid #b7daff;-webkit-border-radius:50%;border-radius:50%;background: #fff; cursor:pointer!important}.aplayer . aplayer-info. Aplayer-controller. Aplayer-bar-wrap aplayer-bar aplayer-played. aplayer-thumb:hover{background:# B7daff}.aplayer. Aplayer-info. Aplayer-controller. aplayer-time{position:absolute;right:0;bottom:-5px;height:17px ; color: #999; font-size:11px}.aplayer. Aplayer-info. Aplayer-controller aplayer-time i{color: #666; font-size:15px}. Aplayer. Aplayer-info. Aplayer-controller aplayer-volume-wrap{display:inline-block;margin-left:7px;cursor: Pointer!important}.aplayer. Aplayer-info. Aplayer-controller aplayer-volume-wrap:hover. aplayer-volume-bar-wrap{ Display:block}.aplayer. Aplayer-info. Aplayer-controller aplayer-volume-wrap. Aplayer-volume-bar-wraP{display:none;position:absolute;bottom:17px;right:-5px;width:25px;height:40px;z-index:99}.aplayer. Aplayer-info. Aplayer-controller. Aplayer-volume-wrap aplayer-volume-bar-wrap. Aplayer-volume-bar{position: Absolute;bottom:0;right:10px;width:5px;height:35px;background: #aaa}.aplayer. aplayer-info. Aplayer-controller. Aplayer-volume-wrap. Aplayer-volume-bar-wrap. Aplayer-volume-bar. aplayer-volume{position:absolute;bottom:0;right : 0;width:5px;background: #b7daff}.aplayer aplayer-lrc{display:none;position:relative;height:40px;background:#. fff;text-align:center;overflow:hidden;margin:-10px 0 10px}.aplayer. Aplayer-lrc:after,.aplayer. Aplayer-lrc:before {position:absolute;z-index:1;display:block;overflow:hidden;content: '; width:100%}.aplayer. aplayer-lrc:before{ Top:0;height:10%;background:-webkit-linear-gradient (Top, #fff 0,rgba (255,255,255,0) 100%); background:- Webkit-gradient (Linear,left top,left Bottom,from), to (Rgba (255,255,255,0)); Bottom, #fff 0,rgba (255, 255,255,0) 100%); Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #ffffff ', endcolorstr= ' * 00ffffff ', gradienttype=0)}.aplayer. Aplayer-lrc:after{bottom:0;height:33%;background:-webkit-linear-gradient ( Bottom, #fff 0,rgba (255,255,255,0) 100%) background:-webkit-gradient (Linear,left bottom,left (White), to ( RGBA (255,255,255,0)); Background:linear-gradient (to Top, #fff 0,rgba (255,255,255,0) 100%); filter:progid:d XImageTransform.Microsoft.gradient (startcolorstr= ' #00ffffff ', endcolorstr= ' #ffffff ', gradienttype=0)}.aplayer. APLAYER-LRC p{font-size:12px;color: #666; line-height:20px;padding:0;margin:0;-webkit-transition:all 5s ease-out; Transition:all 5s Ease-out;opacity:.4}.aplayer. APLAYER-LRC p.aplayer-lrc-current{opacity:1}.aplayer. Aplayer-lrc. Aplayer-lrc-contents{width:100%;-webkit-transition:all 5s Ease-out;transition:all. 5s Ease-out}

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
login demo in php jquery examples with code and demo watermark in php demo popup window in php demo exoplayer demo demo hosting zabbix demo

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More