HTML5 Audio label Homemade music player

Related skills

• HTML5+CSS3(Implement page layout and dynamic effects)
• Iconfont(Use vector icon Gallery to add player related icons)
• LESS(Dynamic CSS Authoring)
• jQuery(quickly write JS script)
• gulp+webpack(Automated build tools for compiling and compressing code such as LESS,CSS,JS)

Features implemented

• Play Pause (click to toggle Playback status)
• Next Song (toggle next)
• Shuffle (play the next song automatically after the current songs are played)
• Single loop (click the shuffle icon to switch to the single loop)
• Volume adjustment (mouse over slide to set volume size)
• Song Progress bar (click to toggle the progress of the jump, you can also click the small dots to drag and drop the progress)
• Real-time lyrics (click words, toggle lyrics interface, automatically scroll lyrics based on real-time progress)
• Like (click Add an active effect)
• Share (can be directly shared to Sina Weibo)

Audio Label Use

• autoplayAuto Play
• loopLoop playback
• volumeVolume settings
• currentTimeCurrent playback position
• durationLength of audio
• pauseTime out
• playPlay
• endedReturns whether the audio has ended

Play and Pause code

function(){    var _this = this; this.play.on(‘click‘, function(){ if (_this.audio.paused) { _this.audio.play(); $(this).html(‘‘); } else { _this.audio.pause(); $(this).html(‘‘) } });}

Music progress bar code

_music.prototype.volumedrag =function){var _this =ThisThis.btn.on (' MouseDown ',function) {_this.clicking =True _this.audio.pause (); })This.btn.on (' MouseUp ',functionfalse; _this.audio.play ();}) this.progress.on ( ' MouseMove click ', function (e) {if (_this.clicking | | E.type = = =  ' click ') {var len = $ ( This). Width (), left = E.pagex-$ (this). Offset (). Left, volume = Left/len; if (volume <= 1 | | volume >= 0) {_ this.audio.currentTime = volume * _this.audio.duration; _this.progressline.css ( ' width ', volume *100 + 

Lyrics Add code

_music.prototype.readylyric =function(lyric) {This.lyricBox.empty ();var lyriclength =0;var html =  ' <div class= ' Lyric-ani ' data-height= ' > '; Lyric.foreach (function ( Element,index) {var ele = Element[1] = = = undefined?  ' ^_^ Lyrics error ^_^ ': Element[1]; HTML + =  <p class= "Lyric-line" data-id= "' +index+" "data-time=" ' + element[ 0] +  ">" + ele +  </p> "; lyriclength++; }); HTML + =  ' </div> '; this.lyricbox.append (HTML); this.ontimeupdate (lyriclength);}         

There is a lot of code to add, I feel that the line can click like (also in my GitHub to a star), your favorite and star is my continued creation of power, thank you!!! SOURCE Add Group

You are welcome to join the Learning Exchange Group if you encounter any problems or want to acquire learning resources in the learning process.
343599877, we learn the front-end together!

HTML5 Audio label Homemade music player