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";        }    }

---

歪门左道

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

---