是否可以为 jquery 点击声音定义一个 mp3 和 ogg 文件？

Question

我有这个解决方案在 chrome 中工作：

Play an audio file using jQuery when a button is clicked

但萤火虫控制台说：

HTTP "Content-Type" of "audio/mpeg" is not supported. Load of media resource http://path/to/sound.mp3 failed.

有没有办法在这个脚本中定义一个 ogg 和 mp3 文件（假设这将使声音在 firefox 中播放）：

<script>
$(document).ready(function() {
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'http://path.com/to/sound.mp3');
$('#play_it').click(function() {
audioElement.play();
});
});
</script>

谢谢。

更新

我尝试在 mp3 引用下方添加对文件的另一个引用并且它有效，但不确定这是否是最佳解决方案：

<script>
$(document).ready(function() {
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'http://path.com/to/sound.mp3');
audioElement.setAttribute('src', 'http://path.com/to/sound.ogg');
$('#play_it').click(function() {
audioElement.play();
});
});
</script>

Answer 1

您必须将<source> 元素添加到<audio> 元素才能指定不同的声音格式

<audio>
    <source src="sound.ogg" type="audio/ogg">
    <source src="sound.mp3" type="audio/mpeg">
</audio>

jQuery:

var audioElement = $('audio');
var sourceElement = $('source');
sourceElement.attr('src', 'http://path.com/to/sound.mp3');
sourceElement.attr('type', 'audio/mpeg');
audioElement.append(sourceElement);
sourceElement = $('source');
sourceElement.attr('src', 'http://path.com/to/sound.ogg');
sourceElement.attr('type', 'audio/ogg');
audioElement.append(sourceElement);