html5插入音频

最新推荐文章于 2024-05-07 00:32:04 发布

林尧彬

最新推荐文章于 2024-05-07 00:32:04 发布

阅读量283

点赞数

原文链接：http://www.cnblogs.com/liangxiaoli/p/7147858.html

版权

<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.οnclick=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.οnclick=function(){
	au.pause();
	}
	lod.οnclick=function(){
	au.load();
	}
	jin.οnclick=function(){
	au.currentTime+=10;
	console.log(au.currentTime)
	}
	tui.οnclick=function(){
	au.currentTime-=10;
	console.log(au.currentTime)
	}
	au.volume=0;
	jia.οnclick=function(){
	au.volume+=0.1;
	}
	jian.οnclick=function(){
	au.volume-=0.1;
	}
	jing.οnclick=function(){
	au.volume=0;
	}
	var inp=document.querySelector("input");
	inp.οnchange=function(){
	var au=document.querySelector("audio");
	au.volume=inp.value;
	}
	</script>