如何使用 Javascript 从按钮值中选择音频文件

Posted 2023-02-25

【中文标题】如何使用 Javascript 从按钮值中选择音频文件

【英文标题】：How do I use Javascript to Select Audio File from Button Value

【发布时间】：2015-10-27 20:46:20

【问题描述】：

所以我有一组具有不同值的按钮，我希望它们在单击时播放带有数字值的歌曲。所有文件都有编号，即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(); 

任何建议将不胜感激。

【问题讨论】：

为每个按钮设置一个 id 并在你的函数中添加一个 switch case

你能提供一个例子来说明我如何做到这一点吗？ @ivan

【参考方案1】：

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

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

然后

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

应该可以。

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

另外，我会添加一个带有按钮的函数调用： - 然后像这样定义你的函数：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();

【讨论】：

非常感谢，这有效。我担心我必须复制和粘贴大量的 javascript 才能使其正常工作。感谢您的帮助@chris_blues

很高兴能帮上忙！ :)

好笑！我目前正在自己​​摆弄一个 html5 播放器，而您仅使用一个 元素并动态更改其来源的方法也有望解决我的一些问题-也感谢您！ :D

【参考方案2】：

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

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