用Javascript播放音频？

Question

我正在用HTML5和Javascript制作游戏.

我怎么能通过Javascript播放游戏音频？

Answer 1

如果你不想搞乱HTML元素:

var audio = new Audio('audio_file.mp3');
audio.play();

var audio = new Audio('https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3');
audio.play();

这使用HTMLAudioElement接口,它以与<audio>元素相同的方式播放音频.

如果您需要更多功能,我使用了howler.js库,发现它简单实用.

<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.1/howler.min.js"></script>
<script>
    var sound = new Howl({
      src: ['https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3'],
      volume: 0.5,
      onend: function () {
        alert('Finished!');
      }
    });
    sound.play()
</script>

Answer 2

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

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

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

本网站揭示的其他一些很酷的事情可以做,比如load(),pause()和几个其他属性audio的元素.

Answer 3

http://www.schillmania.com/projects/soundmanager2/

SoundManager 2提供了一个易于使用的API,允许在任何现代浏览器中播放声音,包括IE 6+.如果浏览器不支持HTML5,那么它会从flash获得帮助.如果你想要严格的HTML5并且没有闪存,那就有一个设置,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/

Answer 4

这是一个相当古老的问题,但我想添加一些有用的信息.主题启动者提到他是"making a game".因此,对于每个需要音频进行游戏开发的人来说,有一个更好的选择,而不仅仅是一个<audio>标签或一个HTMLAudioElement.我认为您应该考虑使用Web Audio API:

虽然网络上的音频不再需要插件,但音频标签为实现复杂的游戏和交互式应用程序带来了重大限制.Web Audio API是一种高级JavaScript API,用于处理和合成Web应用程序中的音频.此API的目标是包括现代游戏音频引擎中的功能以及现代桌面音频制作应用程序中的一些混合,处理和过滤任务.

Answer 5

轻松使用Jquery

//设置没有预加载的音频标签

<audio class="my_audio" controls preload="none">
    <source src="audio/my_song.mp3" type="audio/mpeg">
    <source src="audio/my_song.ogg" type="audio/ogg">
</audio>

//添加jquery加载

$(".my_audio").trigger('load');

//写出播放和停止的方法

function play_audio(task) {
      if(task == 'play'){
           $(".my_audio").trigger('play');
      }
      if(task == 'stop'){
           $(".my_audio").trigger('pause');
           $(".my_audio").prop("currentTime",0);
      }
 }

//决定如何控制音频

<button onclick="play_audio('play')">PLAY</button>
<button onclick="play_audio('stop')">STOP</button>

编辑

要解决@ stomy的问题,以下是使用此方法播放播放列表的方法:

在对象中设置歌曲:

playlist = {
    'song_1' : 'audio/splat.mp3',
    'song_2' : 'audio/saw.mp3',
    'song_3' : 'audio/marbles.mp3',
    'song_4' : 'audio/seagulls.mp3',
    'song_5' : 'audio/plane.mp3'
}

像以前一样使用触发和播放功能:

$(".my_audio").trigger('load');

function play_audio(task) {
      if(task == 'play'){
           $(".my_audio").trigger('play');
      }
      if(task == 'stop'){
           $(".my_audio").trigger('pause');
           $(".my_audio").prop("currentTime",0);
      }
 }

动态加载第一首歌曲:

keys = Object.keys(playlist);
$('.my_audio').append("<source id='sound_src' src=" + playlist[keys[0]] + " type='audio/mpeg'>");

当前歌曲结束时,将音频源重置为播放列表中的下一首歌曲:

count = 0; 
$('.my_audio').on('ended', function() { 
   count++;  
   $("#sound_src").attr("src", playlist[keys[count]])[0];
   $(".my_audio").trigger('load');
   play_audio('play');
});

请参阅此处以获取此代码的实例示例.

Answer 6

添加隐藏的音频并播放.

function playSound(url){
  var audio = document.createElement('audio');
  audio.style.display = "none";
  audio.src = url;
  audio.autoplay = true;
  audio.onended = function(){
    audio.remove() //Remove when played.
  };
  document.body.appendChild(audio);
}

Answer 7

如果您收到以下错误:

未捕获(在promise中)DOMException:play()失败,因为用户没有先与文档交互.

这意味着用户需要首先与网站进行交互(如错误消息所示).在这种情况下,您需要使用click或只使用另一个事件监听器,以便用户可以与您的网站进行交互.

如果要自动加载音频并且不希望用户首先与文档交互,则可以使用setTimeout.

setTimeout(() => {
  document.getElementById('mySound').play();
}, 500)

<audio id="mySound" src="sound.mp3"></audio>

声音将在0.5秒后开始.

Answer 8

new Audio('./file.mp3').play()

Answer 9

var song = new Audio();
song.src = 'file.mp3';
song.play();

Answer 10

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

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

只需使用JavaScript即可播放,如下所示:

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

Answer 11

我遇到了一些与音频承诺对象返回相关的问题，以及一些与用户与声音交互相关的问题，我最终使用了这个小对象，

我建议实现最接近用户正在使用的交互事件的播放声音。

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>

Answer 12

根据安全要求，用户必须与网页交互才能允许音频，这就是我的做法，基于阅读了许多文章，包括本网站上的文章

1. 在 html 中定义所需的音频文件
2. 有一个带有onclick的开始游戏按钮
3. 单击该按钮后，播放并暂停所有音频文件，并在开始时显示您要播放的文件

因为所有的音频文件都在同一个 OnClick 上“播放”过，你现在可以在游戏中任何时候不受限制地播放它们

请注意，为了获得最佳兼容性，请不要使用 wav 文件，MS 不支持它们

使用 mp3 和 ogg，涵盖所有设备

例子：

<audio id="welcome">
    <source src="URL/welcome.ogg" type="audio/ogg">
    <source src="URL/welcome.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

根据需要对游戏中的所有音频重复

然后：

document.getElementById("welcome").play();
document.getElementById("welcome").pause();

根据需要重复，除非在游戏开始时不要暂停您想听到的音频