我正在使用HTML5和JavaScript制作游戏。

如何通过JavaScript播放游戏音频?


当前回答

我有一些问题与播放音频,特别是因为Chrome已经更新,用户必须首先与文档交互。

然而,在我发现的几乎所有解决方案中,JS代码都必须主动设置监听器(例如按钮点击)来接收用户事件,以便播放音频。

就我而言,我只是想让游戏在玩家与之互动时播放BGM,所以我为自己设置了一个简单的监听器,不断检查网页是否正在进行互动。

const stopAttempt = setInterval(() => {
    const audio = new Audio('your_audio_url_or_file_name.mp3');
    const playPromise = audio.play();
    if (playPromise) {
      playPromise.then(() => {
        clearInterval(stopAttempt)
      }).catch(e=>{
        console.log('' + e);
      })
    }
}, 100 )

其他回答

非常简单的解决方案,如果你有一个像下面这样的HTML标签:

<audio id="myAudio" src="some_audio.mp3"></audio>

只需使用JavaScript来播放它,就像这样:

document.getElementById('myAudio').play();

添加一个隐藏的<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);
}

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/

这很简单,只需要获取音频元素并调用play()方法:

document.getElementById('yourAudioTag').play();

看看这个例子:http://www.storiesinflight.com/html5/audio.html

这个站点还提供了一些其他很酷的功能,比如load()、pause()和音频元素的其他一些属性。

如果你想在当前浏览器选项卡未被选中的情况下也能播放声音,你必须在页面加载时加载音频资源。

像这样:

var audio = new Audio('audio/path.mp3');

function playSound(){
    audio.play();
}

请参阅这个问题了解更多细节