31 lines
771 B
HTML
31 lines
771 B
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>背景音乐示例</title>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<h1>欢迎来到我的网站</h1>
|
||
|
|
<!-- 插入背景音乐 -->
|
||
|
|
<audio id="bgm" loop controls>
|
||
|
|
<source src="./src/assets/audio/alarm.mp3" type="audio/mpeg">
|
||
|
|
您的浏览器不支持 audio 标签。
|
||
|
|
</audio>
|
||
|
|
|
||
|
|
<!-- 点击页面播放音乐js -->
|
||
|
|
<script>
|
||
|
|
document.addEventListener('click', function () {
|
||
|
|
var audioElement = document.getElementById('bgm');
|
||
|
|
if (audioElement.paused) { // 检查音频是否已播放
|
||
|
|
audioElement.volume = 0.5; // 设置音量
|
||
|
|
audioElement.play(); // 播放音频
|
||
|
|
}
|
||
|
|
}, { once: true }); // 确保事件处理器只执行一次
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|