如何自定制audio音频播放器的风格。
思路
其实就是隐藏audio的控件，点击一个dom来控制audio的播放和停止。播放的动画采用css3的逐帧动画来实现。
UI
逐帧动画的图片：
html5 Audio
html5 Audio有很多属性,例如：src、preload、controls、autoplay、loop等等。
audio音频格式的支持
| 音频格式 | Chrome | Firfox | IE9 | Opera | Safari |
|---|---|---|---|---|---|
| OGG | 支持 | 支持 | 支持 | 不支持 | 不支持 |
| MP3 | 支持 | 不支持 | 支持 | 不支持 | 支持 |
| WAV | 不支持 | 支持 | 不支持 | 支持 | 不支持 |
如果你做的是移动端的需求，不需要考虑太多上面的问题，并且一般我们的视频文件都是从接口里面获取数据的。
下面我们选择让音频自动缓存，并隐藏它的控件。
html:
<div class="audio-wrap">
<div class="audio-animate"></div>
<div class="audio-length"><span class="audio-len">5</span>"</div>
</div>
<audio preload="auto" hidden="true" id="audio"><source src="demo/test.mp3" type="audio/mpeg"></audio>
动画部分的css代码：
body {
line-height: 1;
}
/* 动画 */
@keyframes player {
0% {
background-position: 0 0;
}
100% {
background-position: -93px 0;
}
}
@-webkit-keyframes player {
0% {
background-position: 0 0;
}
100% {
background-position: -93px 0;
}
}
.audio-animate {
position:absolute;
left: 17px;
top: 15px;
width: 31px;
height: 60px;
background: url(//os8ri8oj4.bkt.clouddn.com/audio-icons.png) -62px 0 no-repeat;
}
.audio-animate.play {
background: url(//os8ri8oj4.bkt.clouddn.com/audio-icons.png) 0 0 no-repeat;
-webkit-animation: player 1s steps(3) infinite;
animation: player 1s steps(3) infinite;
}
audio常用的方法
- load(): 重新加载音频
- play(): 开始播放音频
- pause(): 暂停当前播放的音频
- canPlayType(): 检测浏览器是否支持当前播放的音频
- addTextTrack(): 向音频添加新的文本轨道
- ended(): 播放列表是否已经结束
js控制音频的播放：
(function(){
var audio = document.getElementById('audio')
var audioAnimate = document.querySelector('.audio-animate')
var len = document.querySelector('.audio-len').textContent
document.querySelector('.audio-wrap').addEventListener('click', function() {
if (audio.paused) {
audio.play()
audioAnimate.classList.add('play')
audio.addEventListener('ended', function() {
audioAnimate.classList.remove('play')
})
} else {
audio.pause()
audioAnimate.classList.remove('play')
}
})
})()