html点击多个按钮修改audio src
时间: 2023-08-11 19:17:10 浏览: 45
您可以使用JavaScript来实现在点击多个按钮时修改`<audio>`元素的`src`属性,从而更改正在播放的音乐。可以按照以下步骤进行操作:
1. 在HTML文件中,使用`<audio>`元素来定义音乐文件的位置和其他相关信息,并给每个按钮添加一个`data-src`属性,用于存储要播放的音乐文件的位置。例如:
```
<audio id="myAudio" src="music1.mp3"></audio>
<button class="myButton" data-src="music1.mp3">音乐1</button>
<button class="myButton" data-src="music2.mp3">音乐2</button>
<button class="myButton" data-src="music3.mp3">音乐3</button>
```
2. 在JavaScript文件中,使用`querySelectorAll`方法来获取所有带有`data-src`属性的按钮,并使用`forEach`方法来为每个按钮添加一个点击事件监听器。在点击按钮时,使用`getAttribute`方法来获取该按钮的`data-src`属性值,并使用`setAttribute`方法来修改`<audio>`元素的`src`属性。例如:
```
var audio = document.querySelector('#myAudio');
var buttons = document.querySelectorAll('.myButton');
buttons.forEach(function(button) {
button.addEventListener('click', function() {
var src = this.getAttribute('data-src');
audio.setAttribute('src', src);
});
});
```
这将为每个按钮添加一个点击事件监听器,并在点击时将音乐文件更改为该按钮的`data-src`属性所指定的位置。
希望这个回答对您有所帮助!