我正在使用HTML5和JavaScript制作游戏。
如何通过JavaScript播放游戏音频?
我正在使用HTML5和JavaScript制作游戏。
如何通过JavaScript播放游戏音频?
当前回答
添加一个隐藏的<audio>元素,并按所示播放。
function playSound(url) {
var ourAudio = document.createElement('audio'); // Create a audio element using the DOM
ourAudio.style.display = "none"; // Hide the audio element
ourAudio.src = url; // Set resource to our URL
ourAudio.autoplay = true; // Automatically play sound
ourAudio.onended = function() {
this.remove(); // Remove when played.
};
document.body.appendChild(ourAudio);
}
其他回答
var song = new Audio();
song.src = 'file.mp3';
song.play();
http://www.schillmania.com/projects/soundmanager2/
SoundManager 2提供了一个易于使用的API,允许声音在任何现代浏览器中播放,包括IE 6+。如果浏览器不支持HTML5,那么它可以从flash中获得帮助。如果你想严格使用HTML5而不使用flash,这里有一个设置,preferFlash=false
它在iPad、iPhone (iOS4)和其他支持html5的设备+浏览器上支持100%无flash音频
使用简单如下:
<script src="soundmanager2.js"></script>
<script>
// where to find flash SWFs, if needed...
soundManager.url = '/path/to/swf-files/';
soundManager.onready(function() {
soundManager.createSound({
id: 'mySound',
url: '/path/to/an.mp3'
});
// ...and play it
soundManager.play('mySound');
});
</script>
这里有一个实际的演示:http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/
如果你想在当前浏览器选项卡未被选中的情况下也能播放声音,你必须在页面加载时加载音频资源。
像这样:
var audio = new Audio('audio/path.mp3');
function playSound(){
audio.play();
}
请参阅这个问题了解更多细节
我有一些关于音频承诺对象返回的问题和一些关于用户与声音交互的问题,我最终使用了这个小对象,
我建议执行最接近用户使用的交互事件的播放声音。
var soundPlayer = {
audio: null,
muted: false,
playing: false,
_ppromis: null,
puse: function () {
this.audio.pause();
},
play: function (file) {
if (this.muted) {
return false;
}
if (!this.audio && this.playing === false) {
this.audio = new Audio(file);
this._ppromis = this.audio.play();
this.playing = true;
if (this._ppromis !== undefined) {
this._ppromis.then(function () {
soundPlayer.playing = false;
});
}
} else if (!this.playing) {
this.playing = true;
this.audio.src = file;
this._ppromis = soundPlayer.audio.play();
this._ppromis.then(function () {
soundPlayer.playing = false;
});
}
}
};
并执行如下:
<button onclick="soundPlayer.play('https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3');">Play</button>
以下是2020年你看到错误时的解决方案:
[Error] Unhandled Promise Rejection: NotSupportedError:不支持该操作。 (匿名函数) rejectPromise 玩 (匿名函数)(testaudio.html:96) 调度(jquery-3.4.1.min.js 2:42577):
<div onclick="new Audio('/assets/test.mp3').play()">aaa</div>
不要太圆滑,觉得这是老式的oclick,我把它移到下面的jQuery或外部JavaScript文件中。没有。它需要是一个onclick。