放假我也没什么好说的，不过是在写代码之余多了些看电影的时间罢了。本着钻研的精神也就写了个HTML5的音乐播放器。关于HTML5的audio标签已经有很多资料了，实在不了解的可以看这里：HTML5多媒体组件的使用——第二部分：音频，或者这里：HTML5: Audio & Video API，或者这里：Html5 audio标签(属性)的使用详解，在W3SCHOOL也有关于audio标签的讲解。当然浏览器默认的播放界面是很难看的，所以才需要自己写播放器，其实就是使用自己的样式、自己的脚本来掩盖并驱动默认的播放器。

1

<input id="volumeBar" type="range" />

首先使用js将audio的controls设置为false，这样就去掉了默认的控制界面。不要直接在audio里禁用controls，否则禁用了浏览器Javascript功能的用户就没有办法控制音乐的播放了。

1
2

var player = document.getElementById('player');
player.controls = false;

然后添加播放和暂停功能。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

var playerPlay = document.getElementById('playBtn');
var playerMuteBtn = document.getElementById('muteBtn');
var playerVol = document.getElementById('volumeBar');
var playerPro = document.getElementById('audioProgress');
var playerProVal;
playerPlay.addEventListener('click',function(){
  if(player.paused || player.ended){
    player.play();
  }else{
    player.pause();
  }
});

解释一下，audio的事件和方法，具体可以参考这里：HTML5 Audio/Video 标签,属性,方法,事件汇总。实际上我们就是通过这些事件和方法来控制audio标签的。上面一段代码的作用，是给播放按钮绑定click事件，当音乐播放完毕或者处于暂停状态时，点击按钮播放；否则，点击按钮暂停。然后添加静音功能，用到muted属性。

1
2
3

playerMuteBtn.addEventListener('click',function(){
player.muted = !player.muted;
});

简单地说，是点击静音按钮后把muted属性值反转。添加音量控制。

1
2
3

playerVol.addEventListener('change',function(){
playerObj.volume = playerVol.value;
});

进度条的添加。（progress元素可能没有得到充分的浏览器支持，如果要做跨浏览器的兼容，建议使用span#progress。）

1
2
3
4

player.addEventListener('timeupdate',function(){
(player.currentTime > 0 && player.currentTime < player.duration) ? playerProVal = Math.floor((1000 / player.duration) * player.currentTime) : playerProVal = 0;
playerPro.setAttribute('value',playerProVal);
});

这里夹杂了Javascript里 if...else... 语句的一个简写： (a)?b:c; 若a为真则b，否则c。 如果你使用 span#progress 作为进度条的话，就应当将 playerProVal 的值赋给 span#progress 的 width 。剩下的就是样式以及一些额外功能和优化了。以下是我做的播放器的截图。HTML5播放器-YPlayer

第一次写技术文，也不太会表达，见谅。