HTML5 -- 音乐播放器

此播放器已更新到 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 控件

#file {
display: none;
}

• 自选标签

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;

---

End！