音乐播放器的制作实例（html5）-Tutorial H5-php.cn

音乐播放器的制作实例（html5）

PHP中文网

Lepaskan： 2017-06-20 14:00:00

asal

3719 orang telah melayarinya

实现的功能

播放暂停（点击切换播放状态）
下一曲（切换下一首）
随机播放（当前歌曲播放完自动播放下一曲）
单曲循环（点击随机播放图标可切换成单曲循环）
音量调节（鼠标移入滑动设置音量大小）
歌曲进度条（可点击切换进度直接跳，也可以点击小圆点拖拽切换进度）
实时歌词（点击词，切换歌词界面，根据实时进度自动滚动歌词）
喜欢（点击添加了一个active效果）
分享（可以直接分享到新浪微博）

audio 标签使用

autoplay 自动播放
loop 循环播放
volume 音量设置
currentTime 当前播放位置
duration 音频的长度
pause 暂停
play 播放
ended 返回音频是否已结束

播放和暂停代码

_Music.prototype.playMusic = function(){var _this = this;this.play.on(&#39;click&#39;, function(){if (_this.audio.paused) {
            _this.audio.play();
            $(this).html(&#39;&#39;);
        } else {
            _this.audio.pause();
            $(this).html(&#39;&#39;)
        }
    });
}

Salin selepas log masuk

音乐进度条代码

_Music.prototype.volumeDrag = function(){var _this = this;this.btn.on(&#39;mousedown&#39;, function(){
        _this.clicking = true;
        _this.audio.pause();
    })this.btn.on(&#39;mouseup&#39;, function(){
        _this.clicking = false;
        _this.audio.play();
    })this.progress.on(&#39;mousemove click&#39;, function(e){if(_this.clicking || e.type === &#39;click&#39;){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;);
            }
        }
    });
}

Salin selepas log masuk

歌词添加代码

_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);
}

Salin selepas log masuk

代码还有很多就不一一添加了，觉得还行的话可以点下喜欢（也可以在我的GitHub给个Star），你的喜欢和Star是我继续创作的动力，非常感谢！！！源码加群

Atas ialah kandungan terperinci 音乐播放器的制作实例（html5）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!