• 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>
  • 相关阅读:
    clickhouse-(04)-常用高阶函数
    clickhouse-(03)-库和表引擎
    clickhouse-(02)-适合的场景
    clickhouse-(01)-安装
    MySQL实战45讲-笔记
    Linux软连接和硬链接
    直接访问和间接访问
    指针和地址的区别
    配置Apache 运行CGI---------笔记
    配置Apache 运行CGI
  • 原文地址:https://www.cnblogs.com/liangxiaoli/p/7147858.html
Copyright © 2020-2023  润新知