html5插入音频

时间：2017-07-10 23:40:03 阅读：278 评论：0 收藏：0 [点我收藏+]

<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>

原文地址：http://www.cnblogs.com/liangxiaoli/p/7147858.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

周排行