html5插入音频

<body>
   
   
  <audio controls="controls">
   
  <source src="林ゆうき - lost case.mp3"></source>
  <source src="林ゆうき - lost case.mav"></source>
  </audio>
  <input type="range" min="0" max="1" step="0.2" value="0.2"/>
  <progress max="100" value="0"></progress>
  <button id="bo">播放</button>
  <button id="ting">暂停</button>
  <button id="lod">重新加载</button>
  <button id="jin">快进</button>
  <button id="tui">快退</button>
  <button id="jia">+</button>
  <button id="jian">-</button>
  <button id="jing">静音</button>
  </body>
<script>
  var au=document.querySelector("audio")
  var jin=document.querySelector("#jin");
  var tiu=document.querySelector("#tui");
  var bo=document.querySelector("#bo");
  var ting=document.querySelector("#ting");
  var lod=document.querySelector("#lod");
  var jia=document.querySelector("#jia");
  var jian=document.querySelector("#jian");
  var jing=document.querySelector("#jing");
  bo.onclick=function(){
  au.play();
  setInterval(function(){
  var x=au.duration/100;
  var pro=document.querySelector("progress").value+=1
  },1000)
  //一个按钮播放和暂停
  // if(au.paused==true){
  // bo.innerHTML="暂停";
  // au.play();
  // }
  // else{
  // bo.innerHTML="播放";
  // au.pause();
  // }
  }
  ting.onclick=function(){
  au.pause();
  }
  lod.onclick=function(){
  au.load();
  }
  jin.onclick=function(){
  au.currentTime+=10;
  console.log(au.currentTime)
  }
  tui.onclick=function(){
  au.currentTime-=10;
  console.log(au.currentTime)
  }
  au.volume=0;
  jia.onclick=function(){
  au.volume+=0.1;
  }
  jian.onclick=function(){
  au.volume-=0.1;
  }
  jing.onclick=function(){
  au.volume=0;
  }
  var inp=document.querySelector("input");
  inp.onchange=function(){
  var au=document.querySelector("audio");
  au.volume=inp.value;
  }
  </script>
posted @ 2017-07-10 21:45  赞笔  阅读(608)  评论(1)    收藏  举报