如何使用原生js写音频？_js 怎么写入音频文件-CSDN博客

本文链接：https://blog.csdn.net/weixin_43735788/article/details/84317658
//复制并运行代码，即可显示效果
注意：由于该音频路径为本地音频路径，所以，运行时请先替换音频路径
考虑到新手阅读，代码在编写时并未进行优化，采用基础代码编写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
	*{
		padding: 0;margin: 0;
		}
	#top{
		position:relative;
	}
	#top{
		width:960px;height:540px;
	}
	button{
		padding:2px 5px;margin-left:10px;
	}
	ul{
		width:65%;height:5px;background:white;list-style:none;
		position:absolute;left:15px;top:93%;
	}
	ul span{
		font-size:13px;color:white;position:absolute;
	}
	ul #spans{
		width:150px;height:10px;
		position:absolute;top:-4px;left:101%;
	}
	#spans span{
		float:left;margin-top:-3px;
	}
	#spans .xie{
		margin-left:51px;
	}
	#spans #timer{
		margin-left:60px;
	}
	ol{
		width:12%;height:5px;background:white;list-style:none;
		position:absolute;right:15px;top:93%;
	}
	ol #ol-a{
		width:10%;height:100%;background:#00a1e9;
		position:absolute;left:0;
	}
	ol #ol-y{
		color:white;font-size:13px;
		position:absolute;top:-7px;left:-35px;
	}
	ol #ol-s{
		background:white;width:11px;height:11px;
		position:absolute;left:0;top:-3px;
		border-radius:50%;
	}
	ul #ul-a{
		width:0%;height:100%;background:red;
		position:absolute;left:0;
	}

	ul #ul-s{
		background:white;width:11px;height:11px;
		position:absolute;left:0;top:-3px;
		border-radius:50%;
	}
</style>
</head>
<body>
<div id="top">
	<video src="大鱼.mkv" id="v" width="960" height="540" autoplay></video>
	<ul id="ul">
		<li id="ul-a"></li>
		<li id="ul-s"></li>
		<li id="spans">
			<span id="time">00:00:00</span>
			<span class="xie">/</span>
			<span id="timer">00:10:00</span>
		</li>
	</ul>
	<ol id="ol">
		<li id="ol-y">音量:</li>
		<li id="ol-a"></li>
		<li id="ol-s"></li>
	</ol>
</div>
<button id="a">播放</button>
<button id="s">暂停</button>
<button id="g">开启静音</button>
<button id="q">开启全屏</button>
<script>
	var ot = document.getElementById("top");
	var oul = document.getElementById("ul");
	var ool = document.getElementById("ol");
	var ola = document.getElementById("ol-a");
	var ols = document.getElementById("ol-s");
	var ula = document.getElementById("ul-a");
	var uls = document.getElementById("ul-s");
	var ov = document.getElementById("v");
	var oa = document.getElementById("a");
	var os = document.getElementById("s");
	var og = document.getElementById("g");
	var oq = document.getElementById("q");
	var otime = document.getElementById("time");
	var otimer = document.getElementById("timer");
	window.onload = function() {
		var Times = Math.floor(ov.duration);
		var shi = Math.floor(Times/3600);
		var fen = parseInt(Times/60/10);
		var fen1 = parseInt(Times/60)%10;
		var miao = parseInt(Times%60/10);
		var miao1 = parseInt(Times%60)%10;
		otimer.innerHTML = "00:"+fen+fen1+":"+miao+miao1;
		var Timer = null;
		oa.onclick = function() {
			ov.play();
		}
		os.onclick = function() {
			ov.pause();
		}
		og.onclick = function() {
			if(ov.muted == false){
				og.innerHTML = "取消静音";
				ov.muted = true;
			}else{
				og.innerHTML = "开启静音";
				ov.muted = false;
			}
		}
		var flag = true;
		oq.onclick = function() { 
			var W = ov.width;
			var H = ov.height;
			if(flag) {
				ov.style.width = "100%";
				ov.style.height = "100%";
				ot.style.width = "100%";
				ot.style.height = "100%";
				oq.innerHTML = "取消全屏"
				flag = false;
			} else {
				ov.style.width = W+"px";
				ov.style.height = H+"px";
				ot.style.width = W+"px";
				ot.style.height = H+"px";
				oq.innerHTML = "开启全屏"
				flag = true;
			}
			aa();
		}
		function aa() {
			ola.style.width = ov.volume*50+"%";
			ols.style.left = ov.volume*50+"%";
			ols.onmousedown = function(e){
			ev = e || window.event;
			var olLeft = ool.offsetLeft;
				document.onmousemove = function(e) {
					ev = e||window.event;
					var Left = ev.clientX;
					if(Left-olLeft >= 0&&Left-olLeft <= ool.clientWidth-11){
						ols.style.left = Left-olLeft+"px";
						ola.style.width = (Left-olLeft)/(ool.clientWidth)*100+"%";
						ov.volume = (Left-olLeft)/(ool.clientWidth);
					}
				}
				document.onmouseup = function() {
					document.onmousemove = null;
				}
			}
		}
		aa();
		uls.onmousedown = function(e) {
			ev = e || window.event;
			var ulLeft = oul.offsetLeft;
			var Ti = null;
			document.onmousemove = function(e) {
				ev = e || window.event;
				var Left = ev.clientX;
				if(Left-ulLeft >= 0&&Left-ulLeft <= oul.clientWidth-11){
					uls.style.left = Left-ulLeft+"px";
					ula.style.width = (Left-ulLeft)/(oul.clientWidth)*100+"%";
					ov.currentTime = (Left-ulLeft)/(oul.clientWidth)*ov.duration;
				}
			}
			document.onmouseup = function() {
				document.onmousemove = null;
			}
		}
		Timer = setInterval(function() {
			uls.style.left = ov.currentTime/ov.duration*((oul.clientWidth-11)/oul.clientWidth)*100+"%";
			ula.style.width = ov.currentTime/ov.duration*((oul.clientWidth-11)/oul.clientWidth)*100+"%";
			Ti = ula.clientWidth/oul.clientWidth*ov.duration;
			var shi = Math.floor(Ti/3600);
			var tfen = parseInt(Ti/60/10);
			var tfen1 = parseInt(Ti/60)%10;
			var tmiao = parseInt(Ti%60/10);
			var tmiao1 = parseInt(Ti%60)%10;
			otime.innerHTML = "00:"+tfen+tfen1+":"+tmiao+tmiao1;
		},100)
	}
</script>
</body>
</html>