JS实现HTML5音频播放自定义UI

此处首先放一个MDN上关于H5音频播放的文档

使用 HTML5 音频和视频

音频audio标签使用之后是默认带进度条的，所以audio标签中的属性是我们可以定制，选择将其全部隐藏就是了，然后自己实现。最近学习H5，然后自己实现一个简单的音频播放器（真的只是简单的实现，不过还是自己更改了UI了），先上个图：

---

---

首先是进度条的实现

进度是通过获取当前音频播放时间，通过改变DOM样式实现

<div class="timeline">
    <div id="pastime"></div>
</div>
<style>
.timeline{
    width:80%;
    height:5px;
    background:white;
    border-radius:5px;
    #pastime{
        height:5px;
        background:orange;
        border-radius:5px;
    }
}
</style>
<script>
  var audio = document.getElementById("audio");
  var pastime = document.getElementById("pastime");

  var interval = setInterval(function() {
  var widthline =   Math.round(audio.currentTime)/Math.round(audio.duration) * 100;
  pastime.style.width = widthline + "%";
  currentTime.innerHTML = parseInt(Math.round(audio.currentTime)/60)+ ":"+Math.round(audio.currentTime)%60;                 
    },1000);
</script>

---

上一首下一首以及暂停

上一首下一首直接更换source标签的src属性就行了

<audio id="audio" autoplay="autoplay" loop="loop">
    <source id="source" src={{bgmUrl}}>
    sorry, your brower don't surrport H5
</audio>

然后是暂停继续也是调用API

$scope.switch = function() {
        if(audio.paused) {
            audio.play();
            $scope.turn = "glyphicon glyphicon-pause";
        }else{
            audio.pause();
            $scope.turn = "glyphicon glyphicon-play";
        }
    }

---

歪门左道

其实现在很多播放器都提供了生成播放的链接，如果嫌麻烦的而且只是单纯的要个播放器资源的话，可以考虑使用，比如网易云、优酷、酷我等等播放器。

---