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>