HTML 5 audioタグを使った自作音楽プレーヤー

この文章の著作権は饥人谷と本人の所有に帰して、転载は本人の同意を得なければならなくて、プロジェクトはオープンソースのプロジェクトで、商业の応用に使うことができなくて、ただ学习に供します.
プレビューアドレス:https://boloog.github.io/music/GitHubアドレス:https://github.com/boloog/music/
関連スキル

HTML5+CSS3(ページレイアウトとダイナミックエフェクトを実現)

Iconfont(ベクトルアイコンライブラリを使用してプレーヤー関連アイコンを追加)

.

LESS(動的CSS作成)

jQuery(jsスクリプトのクイック作成)

gulp+webpack(自動構築ツール、LESS、CSS、JSなどのコンパイルと圧縮コードを実現)

実装された機能

再生休止(クリックで再生状態を切り替える)

次の曲(次の曲に切り替え)

ランダム再生(現在の曲が再生されたら次の曲が自動的に再生される)

シングルサイクル(ランダム再生アイコンクリックでシングルサイクルに切り替わる)

音量調整(マウス移動スライド設定音量サイズ)

歌曲进度条(可クリック切替进度直接跳,可クリック小圆点拖拉切替进度)

リアルタイム歌詞(クリック語、歌詞インタフェースを切り替え、リアルタイム進捗に応じて自動的に歌詞をスクロール)

お気に入り(クリックでactive効果が追加されました)

共有(新浪微博に直接共有できる)

audioラベル使用

autoplay自動再生

loopサイクル再生

volume音量設定

currentTime現在の再生位置

durationオーディオの長さ

pause一時停止

play再生

endedオーディオが終了するかどうか

を返す.
コードの再生と一時停止

_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.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 +'%');
            }
        }
    });
}

歌詞追加コード

_Music.prototype.readyLyric = function(lyric){
    this.lyricBox.empty();
    var lyricLength = 0;
    var html = '
';
    lyric.forEach(function(element,index) {
        var ele = element[1] === undefined ? '^_^    ^_^' :  element[1];
        html += '
 ' +  ele + ' 
';
        lyricLength++;
    });
    html += '
';
    this.lyricBox.append(html);
    this.onTimeUpdate(lyricLength);
}

コードはまだたくさんあっていちいち追加しないで、まあまあだと思ったら好きになって(私のGitHubでスターをあげることもできます)、あなたの好きとスターは私の創作を続ける動力で、とても感謝します!!
何か質問や質問がありましたら、ご指摘ください.