展厅背景音乐

下面给大家演示如何设置展厅的背景音乐。

前端：HTML5音频元素audio

作为前端，大家都知道像div、p都是html元素，音频audio也是html的一个元素，audio功能就是用来播放一段音频。

// 创建一个audio对象
const audio = document.createElement('audio');
audio.src = './背景音乐.wav';//设置音频文件路径
audio.loop = true;//循环播放
audio.volume = 0.5;//音量大小0~1

audio.play();//播放音频
audio.pause();//暂停播放

如果你想了解audio更多属性或方法，可以查询html5相关文档。

创建一个audio对象

在HelloWorld.vue文件创建一个音频对象。

const audio = document.createElement('audio');
audio.loop = true;//循环播放

设置音频路径

课件提供了一个wav格式的音频文件背景音乐.wav,你可以放到vue项目public文件下，然后设置音频的路径属性src即可。

audio.src = './背景音乐.wav';//设置音频文件路径

播放音频

注意：有些浏览器有限制，不能直接代码audio.play()自动播放音频，可以通过用户交互触发，比如鼠标点击事件，执行audio.play()

addEventListener('click', () => {
    audio.play();
});