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>

查看全文

相关阅读:
关于第一次作业表达式求导总结
 北航OO第一单元总结
 OO课程总结
 OO第三次博客
 OO第二次博客
 OO第一次博客
 OO第一单元总结——多项式求导
 [面向对象]电梯作业优化相关
 面向对象的程序设计-模块一课程总结
 OO第二单元总结——电梯