HTML5 audio tags: Self-made music player, html5audio

HTML5 audio tags: Self-made music player, html5audio
Related skills

• HTML5+CSS3(Achieve page layout and dynamic effects)
• Iconfont(Use the vector icon library to add player icons)
• LESS(Dynamic CSS writing)
• jQuery(Fast Writing of js scripts)
• gulp+webpack(Automated build tools for LESS, CSS, JS, and other compilation and compression code)

Implemented Functions

• Pause (click to switch the playback status)
• Next song (switch to next song)
• Random playback (the next song is automatically played after the current song is played)
• Single Loop (click the random playback icon to switch to single loop)
• Volume Adjustment (move the mouse to slide to set the volume)
• Song progress bar (you can click the switch Progress to jump directly, or click the dot to drag and drop to switch the progress)
• Real-time lyrics (Click words, switch to the lyrics page, and automatically scroll the lyrics based on the real-time progress)
• Like (click to add an active effect)
• Share (you can directly share it with Sina Weibo)

Use audio labels

• autoplayAutomatic playback
• loopLoop playback
• volumeVolume settings
• currentTimeCurrent playback position
• durationAudio Length
• pausePause
• playPlay
• endedIndicates whether the audio has ended.

Play and pause code

_Music.prototype.playMusic = 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 = this;    this.btn.on('mousedown', function(){        _this.clicking = true;        _this.audio.pause();    })    this.btn.on('mouseup', function(){        _this.clicking = false;        _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 +'%');            }        }    });}

Code for adding lyrics

_ Music. prototype. readyLyric = function (lyric) {this. lyricBox. empty (); var lyricLength = 0; var html = '<div class = "lyric-ani" data-height = "20">'; lyric. forEach (function (element, index) {var ele = element [1] === undefined? 'Wrong _^ incorrect lyrics ^_^ ': 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 are still a lot of code that will not be added one by one. If you think it is okay, you can like it (or you can give it a Star on my GitHub). Your liking and Star are the motivation for my continued creation, thank you !!! Source code grouping

If you have any questions during the learning process or want to obtain learning resources, join the learning exchange group.
343599877. Let's learn the front-end together!