zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    Golang手动分页,按等份拆分数据
    GORM无法映射到结构体上
    VSCODE GOLANG运行多个服务
    解决,MAVEN
    Properties配置文件常见错误写法以及转义字符说明
    Pentaho Data Integration (PDI/Kettle)与Java版本支持关系
    MYSQL之读写分离搭建方案
    Windows下创建软件快速启动命令
    Sonar的一些使用总结
    使用SVG Path绘图
  • 原文地址:https://www.cnblogs.com/liangxiaoli/p/7147858.html
Copyright © 2011-2022 走看看