如何使用按钮值中的 Javascript 到 Select 音频文件

Question

所以我有一组按钮，所有按钮都具有不同的值，我希望它们在单击时以其数值播放歌曲。所有文件都有编号，即 1.mp3、2.mp3、3.mp3 等

有没有一种方法可以做到这一点而无需为每首歌曲重复 Javascript 代码。

这是我的 HTML:

<audio id="player">
        <source id="sourceMp3" src="" type="audio/mp3">
        Your browser does not support the audio element.
</audio>

<button onclick="loadSong()" value="1">1</button>
<button onclick="loadSong()" value="2">2</button>
<button onclick="loadSong()" value="3">3</button>
<button onclick="loadSong()" value="4">4</button>
<button onclick="loadSong()" value="5">5</button>

这是我的 JavaScript:

function loadSong(){

var player=document.getElementById('player');
var songNo = document.getElementByTagName('button').value;
var sourceMp3=document.getElementById('player');

sourceMp3.src='songs/' + songNo + '.mp3;

player.load();
player.play(); 

}

如有任何建议，我们将不胜感激。

Answer 1

你在JS部分的调用应该是：

var sourceMp3=document.getElementById('sourceMp3');

然后

sourceMp3.src='songs/' + songNo + 'mp3';

应该可以。

注意，您应该选择 -tag 的 'src'，而不是

此外，我会添加一个带有按钮的函数调用：- 然后像这样定义您的函数：function loadSong(songNo)...

因此，您的代码可能如下所示：

<audio id="player">
    <source id="sourceMp3" src="" type="audio/mp3">
    Your browser does not support the audio element.
</audio>

<button onclick="loadSong(1)">1</button>
<button onclick="loadSong(2)">2</button>
<button onclick="loadSong(3)">3</button>
<button onclick="loadSong(4)">4</button>
<button onclick="loadSong(5)">5</button>

和 JS：

function loadSong(songNo) {
var player=document.getElementById('player');
var sourceMp3=document.getElementById('sourceMp3');
sourceMp3.src='songs/' + songNo + '.mp3';

player.load();
player.play();

Answer 2

var songNo = this.value 不是 var songNo = document.getElementByTagName('button').value;

document.getElementByTagName('button') returns HTMLCollection 和 loadSong 是点击事件的处理程序，因此您可以访问 'this'