此播放器已更新到 2.0 版本，可以前去我的 Github 查看更新内容
这两天写了一个在线音乐播放器，支持播放本地音乐，并且可以调整音量，显示进度条。 下图是效果
demo01.gif
当然，你还可以 在线体验，接下来我会针对本程序的一些疑难点进行解析。如果你想查看源码，你可以 点击这里
1. 图标的使用
这里的图标取自 FontAwesome,这是一种字体图标，所以它可以随着字体颜色的改变而改变，它的大小也是由字体的大小决定的，也就是 font-size 。
2. Progress 默认样式的改变
其实不难看出，程序中对进度条的颜色进行了设置，颜色的合理使用可以改变用户体验，所以我认为这还是很有必要的。关于这一点，有兴趣的人可以去看 HTML5 progress元素的样式控制、兼容与实例。
主要是下面两段代码，上面一段是适配 Google Chrome 和 Safari, 下面则是为了适配 Firefox 。
progress::-webkit-progress-value {
background: #6cf;
}
progress::-moz-progress-bar {
background: #6cf;
}
3. 音乐信息的获取
首先，我们需要在 JS 中取得 audio
var player = document.getElementById("player");
然后我们可以调用 player.duration 获取音频的总时长(s)， player.currentTime 可以取得当前已经播放的时长，我们可以利用这个这个属性与总时长的比值更新进度条。player.volume 可以取得音频播放时的音量，取值在 0.0 - 1.0 之间。
4. 设置间歇调用
为了更新进度条，我设置了间歇调用，具体语句如下。
var interval = setInterval(change, 1000);
也就是说，每隔 1s 调用 change 这个函数，下面来解释 change 函数。
function change() {
setCurrentTime();
var currentTime = player.currentTime,
duration = player.duration;
var progress = (currentTime / duration).toFixed(2) * 100;
progressElement.value = progress;
}
首先，调用 setCurrentTime() , 这个函数用于更新当前播放时间。 progress 变量用于计算进度条的值，注意将比值的结果转换成两位数，然后转换成百分制。
5. 监听音频播放完毕事件
当音频播放完毕后，会触发 ended 事件，我们要监听这一事件进行善后处理，具体要做那些事情呢？
- 清除间歇调用
- 清空进度条
- 清除音频已播放时间，并将其置为 0:00
- 改变播放按钮的图标
如果有兴趣的话，完全可以在音频播放完毕后设置 loop 属性，重新再播放一遍。
6. 上传音乐
目前，这个程序也只能播放本地音乐，那么要怎么选中本地音乐并且播放呢？
首先，你可能会想到用 input， 但那 UI 也太丑了吧？ 所以，我们需要做一些改变，我们仍然使用 input 控件，但是我们将其 display 设置为 none， 然后我们再定义一个标签，并且监听其点击事件，如果事件触发，那么我们就手动触发 input 控件的点击事件。具体操作如下所示。
- input 控件
<input type="file" id="file">
#file {
display: none;
}
- 自选标签
<span id="add-music"><i class="fa fa-upload" aria-hidden="true"></i></span>
var addMusicElement = document.getElementById("add-music"),
fileElement = document.getElementById("file");
addMusicElement.addEventListener("click", function(event) {
fileElement.click();
});
当然，想播放本地音乐，我们选中文件之后还需要做一些转变，否则是无法播放的，具体代码如下所示。
function getURL() {
var file = fileElement.files[0];
var url = URL.createObjectURL(file);
player.src = url;
}
通过第二句转换而得的 URL， 就可以赋值给 audio 进行播放了。
7. 小技巧
关于播放时间，由于想要显示 0:00 格式，所以可能需要一些小技巧，比如下面这样。
second = (second >= 10) ? second : '0' + second;
网友评论