音乐播放器的制作实例（html5）-H5教程-PHP中文网

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

PHP中文网

发布： 2017-06-20 14:00:00

原创

3719 人浏览过

实现的功能

播放暂停（点击切换播放状态）
下一曲（切换下一首）
随机播放（当前歌曲播放完自动播放下一曲）
单曲循环（点击随机播放图标可切换成单曲循环）
音量调节（鼠标移入滑动设置音量大小）
歌曲进度条（可点击切换进度直接跳，也可以点击小圆点拖拽切换进度）
实时歌词（点击词，切换歌词界面，根据实时进度自动滚动歌词）
喜欢（点击添加了一个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;)
        }
    });
}

登录后复制

音乐进度条代码

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

登录后复制

歌词添加代码

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

登录后复制

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

以上是音乐播放器的制作实例（html5）的详细内容。更多信息请关注PHP中文网其他相关文章！