原生JS实现音频播放

最新推荐文章于 2025-03-29 09:05:13 发布

代码De搬运工

最新推荐文章于 2025-03-29 09:05:13 发布

阅读量709

点赞数

文章标签： javascript 音视频 css

本文链接：https://blog.youkuaiyun.com/m0_46577631/article/details/130378659

版权

JS原生实现音频播放

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>录音播放</title>
	<style>
		* {
			margin: 0;
			padding: 0;
			list-style: none;
			font-family: '微软雅黑'
		}
		#container {
			width: 450px;
			height: 600px;
			background: #eee;
			margin: 10px auto 0;
			position: relative;
			box-shadow: 0px 0px 16px #999;
			overflow: hidden;
		}
		#title{
			padding:80px 0px 30px 0px;
			display: flex;
			justify-content: center;
		}
		#audio{
			padding:30px 0px 30px 0px;
			display: flex;
			justify-content: center;
		}
		#btnDom{
			display: flex;
			justify-content: center;
		}
		#playBtn{
			width: 80px;
			height: 30px;
			background: linear-gradient(to left, #70b1f5, #4284f7,#FFFFFF);
			border: none;
			border-radius: 4px;
			cursor: pointer;
		}
		#playBtn:hover{
			background: linear-gradient(to left, #a7c0f6, #52a0f8,#FFFFFF);
		}
	</style>
</head>
<body>
	<div id="container">
		   <div id="title">
			     <h2>音频播放</h2>
		   </div>
		   <div id="audio">
			     <!-- controls属性控制音频DOM是否显示 不加这个属性页面上就不会显示这个元素-->
			     <audio id="audioPlay" controls src="./audios/钉钉.m4a"></audio> 
		   </div>
		   <div id="btnDom">
			     <button id="playBtn">播放</button>
		   </div>
	</div>
</body>
<script>
	    var playBtn=document.getElementById('playBtn')  // 获取播放按钮节点
		var audioPlay=document.getElementById('audioPlay') // 获取音频播放节点
		playBtn.addEventListener('click',(e)=>{  // 设置播放按钮点击事件
			audioPlay.currentTime=1  // 设置音频时间
			audioPlay.play() //获取audio标签的元素id然后调用play方法就可以播放了
       })
</script>
</html>