简单的页面音乐播放,利用页面的鼠标点击事件实现
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>音乐自动播放</title>
<style>
#stop {
width: 50px;
height: 50px;
position: fixed;
top: 90%;
left: 95%;
background-color: rgb(198, 243, 51);
text-align: center;
line-height: 50px;
font-weight: 900;
cursor: pointer;
}
</style>
</head>
<body>
<audio src="TS.mp3"></audio>//src中写入需要的音乐文件
<div id="stop">暂停</div>
</body>
<script>
document.onclick = function () {
document.querySelector('audio').play();//播放
}
document.querySelector('#stop').onclick = function (ev) {//获取事件对象
var ev = ev || window.event;
ev.stopPropagation();//取消事件冒泡--不取消的话事件冒泡会导致页面的暂停键失效
document.querySelector('audio').pause();
}
</script>
</html>