src/audio/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>audio</title>
    <style>
      audio{
        width: 400px;
        height:40px;
      }
      #progress{
        width: 100%;
        height: 10px;
      }
    </style>
  </head>
  <body>
    <audio id="myVideo" src="http://m10.music.126.net/20180418120451/8bd409e11b5d4e387ac0c257d872d8a1/ymusic/2b72/ddb6/3c36/cec43904bcc73074674bee41bc301c6a.mp3" controls loop poster="http://d.hiphotos.baidu.com/zhidao/pic/item/c8177f3e6709c93d13b161359e3df8dcd00054b4.jpg">
      你的浏览器不支持audio
    </audio>
    <div>
      <input type="button" value="播放/暂停" id="play_pause"/>
      <input type="button" value="前进15s" id="move_15s"/>
      <input type="button" value="2倍速" id="speed_up"/>
      <input type="button" value="降音量" id="noise_down"/>
      <input type="button" value="静音" id="no_noise"/>
      <input type="button" value="全屏" id="full_screen"/>
    </div>
    <div id="progress"></div>
  </body>
  <script>
    var audio = document.getElementById('myVideo');
    var btn1 = document.getElementById('play_pause');
    var btn2 = document.getElementById('speed_up');
    var btn3 = document.getElementById('noise_down');
    var btn4 = document.getElementById('no_noise');
    var btn5 = document.getElementById('full_screen');
    var btn6 = document.getElementById('move_15s');
    var progress = document.getElementById('progress');
    audio.addEventListener('timeupdate',function(){
      progress.style.background = 'linear-gradient(to right,#999 '+(audio.currentTime/audio.duration)*100+'%,#fff 0)';
    },false)
    btn1.onclick = function(){
      audio.paused?audio.play():audio.pause();
    }
    btn2.onclick = function(){
      audio.playbackRate = 2;
    }
    btn3.onclick=function(){
      audio.volume -= audio.volume-.1>=0?.1:0;
    }
    btn4.onclick=function(){
      audio.muted = !audio.muted;
    }
    btn5.onclick = function(){
      audio.webkitRequestFullScreen();
    }
    btn6.onclick = function(){
      audio.currentTime += 15;
    }
  </script>
</html>