放假我也没什么好说的,不过是在写代码之余多了些看电影的时间罢了。本着钻研的精神也就写了个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#progresswidth 。剩下的就是样式以及一些额外功能和优化了。以下是我做的播放器的截图。HTML5播放器-YPlayer

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