原生js手写音频自定义样式功能

雨点打透心脏的1/2处 2023-10-09 12:11 42阅读 0赞

写的代码完整的是这个:不是很好 没优化 能用   拖拽控制播放的进度时间

效果如图所示:

![20190925164826424.gif][]

<!DOCTYPE html>
    <html>
    
    <head>
    	<title></title>
    	<style type="text/css">
    		.control p {
    			border: 1px solid #ddd;
    			padding: 10px;
    		}
    
    		.playTime {
    			width: 500px;
    			height: 2px;
    			background: rgba(224, 224, 224, 1);
    			position: relative;
    			display: flex;
    			justify-content: space-between;
    			cursor: pointer;
    		}
    
    		#progressId {
    			position: absolute;
    			top: 0px;
    			left: 0;
    			width: 500px;
    			height: 2px;
    			background: #EFEFF4;
    			/* color: #44BCB7; */
    		}
    
    		/* 表示总长度背景色 */
    		progress::-webkit-progress-bar {
    			background-color: #EFEFF4;
    		}
    
    		/* 表示已完成进度背景色 */
    		progress::-webkit-progress-value {
    			background-color: #44BCB7;
    		}
    
    		#playedTime,
    		#playAllTime {
    			color: rgba(153, 153, 153, 1);
    			font-size: 14px;
    			margin-top: 9px;
    		}
    
    		#controlBtn {
    			position: absolute;
    			top: -6px;
    			left: 0;
    			width: 12px;
    			height: 12px;
    			background: rgba(255, 255, 255, 1);
    			box-shadow: 0px 2px 6px 0px rgba(68, 188, 183, 0.5);
    			border: 2px solid rgba(68, 188, 183, 0.7);
    			border-radius: 50%;
    		}
    		#div1 {
    			width: 198px;
    			height: 66px;
    			padding: 10px;
    			border: 1px solid #aaaaaa;
    		}
    	</style>
    </head>
    
    <body ondrop="drop(event)" ondragover="allowDrop(event)">
    	<div>
    		<div class="control" id="controlId" style="display:flex;justify-content: space-around;width:300px;">
    			<p onclick="repeatPlay()">重新播放</p>
    			<p onclick="pause()" id="pauseBtn">播放</p>
    			<p onclick="controlMuted()" id="mutedBtn">不静音</p>
    		</div>
    		<audio src="https://www.w3school.com.cn/i/horse.ogg" id="audioId" controls></audio>
    		<div class="playTime" id="playTimeId">
    			<progress value="1" max="100" id="progressId"></progress>
    			<span id="playedTime"></span>
    			<span id="playAllTime"></span>
    			<div id="controlBtn" draggable="true" ondragstart="drag(event)"></div>
    		</div>
    	</div>
    	<br />
    </body>
    
    </html>
    <script type="text/javascript">
    	let playTime = document.getElementsByClassName("playTime")[0];
    	let controlBtn = document.getElementById("controlBtn");
    	let audioId = document.getElementById("audioId");
    	playTime.onclick = function (e) {
    		controlBtn.style.left = e.offsetX + 'px';
    		audioId.currentTime = (parseInt(controlBtn.style.left) / playTime.offsetWidth) * audioId.duration;
    		playedTime.innerText = getFormatTime(audioId.currentTime);
    		progressId.value = (audioId.currentTime / audioId.duration) * 100;
    	}
    	function allowDrop(ev) {
    		var data = ev.dataTransfer.getData("Text");
    		if(playTime.offsetWidth>=ev.offsetX){
    			document.getElementById('controlBtn').style.left=ev.offsetX + 'px';
    		}
    		else{
    			document.getElementById('controlBtn').style.left=playTime.offsetWidth + 'px';
    		}
    		audioId.currentTime = (parseInt(controlBtn.style.left) / playTime.offsetWidth) * audioId.duration;
    		playedTime.innerText = getFormatTime(audioId.currentTime);
    		progressId.value = (audioId.currentTime / audioId.duration) * 100;
    	}
    	function drag(ev) {
    		ev.dataTransfer.setData("Text", ev.target.id);
    	}
    	function drop(ev) {
    		// ev.preventDefault();
    		var data = ev.dataTransfer.getData("Text");
    		document.getElementById("playTimeId").appendChild(document.getElementById(data));
    		if(playTime.offsetWidth>=ev.offsetX){
                document.getElementById(data).style.left=ev.offsetX + 'px';
    		}else{
    			document.getElementById(data).style.left=playTime.offsetWidth + 'px';
    		}
    		audioId.currentTime = (parseInt(controlBtn.style.left) / playTime.offsetWidth) * audioId.duration;
    		playedTime.innerText = getFormatTime(audioId.currentTime);
    		progressId.value = (audioId.currentTime / audioId.duration) * 100;
    	}
    	let progressId = document.getElementById("progressId");
    	let playedTime = document.getElementById("playedTime");
    	let playAllTime = document.getElementById("playAllTime");
    	var t = '';
    	//播放状态播放事件
    	audioId.onplaying = function () {
    		t = setInterval(function () {
    			console.log('setIN');
    			progressId.value = (audioId.currentTime / audioId.duration) * 100;
    			let playedTime = document.getElementById("playedTime");
    			playedTime.innerText = getFormatTime(audioId.currentTime);
    			let playAllTime = document.getElementById("playAllTime");
    			playAllTime.innerText = getFormatTime(audioId.duration);
    			controlBtn.style.left = (progressId.value / 100) * playTime.offsetWidth + 'px';
    		}, 1000);//设置每1000毫秒（一秒钟）回调一次函数
    	}
    	//播放状态停止事件
    	audioId.onpause = function () {
    		console.log('clearInterval');
    		//停止播放时候再次更新下dom滚动条 以防不同步更新
    		setTimeout(function () {
    			console.log('setIN');
    			progressId.value = (audioId.currentTime / audioId.duration) * 100;
    			let playedTime = document.getElementById("playedTime");
    			playedTime.innerText = getFormatTime(audioId.currentTime);
    			let playAllTime = document.getElementById("playAllTime");
    			playAllTime.innerText = getFormatTime(audioId.duration);
    			controlBtn.style.left = (progressId.value / 100) * playTime.offsetWidth + 'px';
    		}, 100);
    		clearInterval(t);
    	}
    	function pause() {
    		let tex=audioId.paused;
    		document.getElementById('pauseBtn').innerText=tex?'暂停':'播放';
    		audioId.paused ? audioId.play() : audioId.pause();
    	}
    	function repeatPlay() {
    		audioId.currentTime = 0;
    		audioId.play();
    	}
    	function controlMuted() {
    		let tex=audioId.muted;
    		document.getElementById('mutedBtn').innerText=tex?'不静音':'静音';
    		audioId.muted = !audioId.muted;
    	}
    	function getFormatTime(currentTime) {
    		let currMin = '' + Math.floor(currentTime / 60);
    		currMin = currMin < 10 ? currMin.padStart(2, '0') : currMin;
    		let currSecond = '' + Math.floor(currentTime % 60);
    		currSecond = currSecond < 10 ? currSecond.padStart(2, '0') : currSecond;
    		return currMin + ':' + currSecond
    	}
    	function getInitTime() {
    		// debugger;
    		let playedTime = document.getElementById("playedTime");
    		playedTime.innerText = getFormatTime(audioId.currentTime);
    		let playAllTime = document.getElementById("playAllTime");
    		playAllTime.innerText = getFormatTime(audioId.duration);
    	}
    	setTimeout(() => {
    		getInitTime();//开始初始化时间
    	}, 100)
    
    </script>

[20190925164826424.gif]: https://img-blog.csdnimg.cn/20190925164826424.gif