Music player production example (html5)

Related skills

• HTML5+CSS3 (realizing page layout and dynamic effects)

• Iconfont (Use vector icon library to add player related icons)

• LESS (Dynamic CSS writing)

• jQuery (Quickly write js scripts)

• gulp+webpack (Automated build tool to compile and compress LESS, CSS, JS, etc. codes )

Function implemented

• Playback pause (click to switch playback status)

• Next Song (switch to next song)

• Random play (automatically play the next song after the current song is played)

• Single loop (click to random The play icon can be switched to a single loop)

• Volume adjustment (move the mouse and slide to set the volume)

• Song progress bar (can be clicked to switch The progress jumps directly, or you can click the small dot and drag to switch the progress)

• Real-time lyrics (click the word to switch the lyrics interface, and automatically scroll the lyrics according to the real-time progress)

• Like (click to add an active effect)

• Share (can be shared directly to Sina Weibo)

audio Tag usage

• autoplay Autoplay

• loop Loop play

• volume Volume setting

• ##currentTime Current playback position

• duration Audio length

• pause Pause

• play Play

• ended Returns 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(&#39;width&#39;, volume *100 +&#39;%&#39;);
            }
        }
    });
}

Lyrics adding code

_Music.prototype.readyLyric = function(lyric){this.lyricBox.empty();var lyricLength = 0;var html = &#39;<div class="lyric-ani" data-height="20">&#39;;
    lyric.forEach(function(element,index) {var ele = element[1] === undefined ? &#39;^_^歌词错误^_^&#39; :  element[1];
        html += &#39;<p class="lyric-line" data-id="&#39;+index+&#39;" data-time="&#39; + element[0] + &#39;"> &#39; +  ele + &#39; </p>&#39;;
        lyricLength++;
    });
    html += &#39;</div>&#39;;this.lyricBox.append(html);this.onTimeUpdate(lyricLength);
}

There are many codes so I won’t add them one by one. If you think it’s good, you can like it (you can also give it a star on my GitHub). Yours Like and Star are my motivation to continue creating, thank you very much! ! ! Source code group

The above is the detailed content of Music player production example (html5). For more information, please follow other related articles on the PHP Chinese website!