使用Javascript播放音频?


688

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

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


9
由于是html5,因此存在<audio>。该元素将具有用于“播放”,“暂停”等的适当JS钩子……
Marc B

1
@Marc好了,您能否提供一些有关这些钩子的信息?
Ryan S.

14
我敢打赌,你想知道在哪里的文档是所有的音频方法:stackoverflow.com/questions/4589451/...
布莱恩唐宁

Answers:


1324

如果您不想弄乱HTML元素:

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

这使用了HTMLAudioElement接口,该接口以与<audio>element相同的方式播放音频。


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


9
此方法适用于播放mp3,但不适用于wav文件。有播放WAV文件的方法吗?
user781486 2014年

12
@ user3293156此方法支持与HTML5相同的格式<audio>。维基百科有一个音频格式兼容性表new Audio()可以在除Internet Explorer之外的所有浏览器中播放WAV文件。
罗里·奥肯

281
@ RoryO'Kane,以便每个人都可以播放Microsoft以外的Microsoft音频格式?大声笑
Dave Cousineau

10
几个警告:(1)Firefox无法播放mp3。您将需要一个ogg文件。(2)如果您通过https提供内容,则Safari / iOS将无法播放。您需要具有有效的证书。
彼得

9
请注意,除非用户至少在文档中单击一次,否则从2018年4月开始,Chrome将不会播放音频文件。看这里
尼尔斯·林德曼


38

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

SoundManager 2提供了易于使用的API,该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/


3
通常,当您在本网站上提供链接时,您会在帖子中提供一些信息。不建议仅发布一个简单的链接并说“单击此”。
Ryan S.

7
抱歉,我认为该网站会自我解释。然后,我将对其进行编辑
LordZardeck

32

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

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


22

使用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');
});

请参见此处,以获取此代码的实际示例。


这将同时播放所有类别为“ my_audio”的音频标签。您如何在播放列表中一个接一个地播放?
造口术

@stomy您是否将其发布为StackOverflow上的问题?如果您愿意,请告诉我。我可以帮你。否则,我将提供此功能-您可以(在开始播放歌曲后)监听ended要发出的事件并启动列表中的下一个音频文件(大概是在DOM,JS内存等中保持跟踪) )。developer.mozilla.org/en-US/docs/Web/Events/ended
Sgnl

@stomy,请检查我的答案中的EDIT,以创建一个连续播放歌曲的播放列表。
控制论

15

添加隐藏的音频并播放。

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);
}

14

如果出现以下错误:

未捕获(承诺)的DOMException:play()失败,因为用户没有首先与文档进行交互。

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

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

setTimeout(() => {
  document.getElementById('mySound').play();
}, 500)
<audio id="mySound" src="sound.mp3"></audio>

声音将在0.5秒后开始。


没用 不在Chrome中。不再。
Arfeo



5

如果您具有如下所示的HTML标记,则是非常简单的解决方案:

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

只需使用JavaScript即可播放,就像这样:

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

您是要使用</a>还是</ audio>。只是好奇。
库珀

我使用了<audio>标签。
本·斯塔福德

1
Ben,您的示例中的结束标记不正确,这就是@Cooper提出该问题的原因。我用正确的结束标记编辑了答案。
Sgnl

4

我遇到了一些与音频答应对象返回有关的问题,还有一些与用户与声音交互的问题有关,最终我使用了这个小对象,

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

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>

如果我从JS触发自动播放,则无法在Safari上运行。
maki10 '19

1
@ maki10嗨,我在野生动物园桌面版本12.0.3(14606.4.5)中对其进行了测试,并且它在这里工作: jsfiddle.net/xf5zyv4q/5
塔尔西伯尼

也适用于野生动物园移动IOS 12
塔尔西伯尼

我为我的问题jsfiddle.net/6431mfb5更新了链接。对我而言,自动播放功能只能在Safari浏览器中首次使用,而在更新的版本中则只能使用。
maki10

@ maki10因为你怎么称呼它,而无需用户交互,自动播放不会工作,而喜欢点击触摸用户交互,删除最后一行:soundPlayer.play(” interactive-examples.mdn.mozilla.net/media/examples/...);
talsibony

3

我用这种方法播放声音...

var audioElement;
if(!audioElement) {
  audioElement = document.createElement('audio');
  audioElement.innerHTML = '<source src="' + '/audio/sound.mp3'+ '" type="audio/mpeg" />'
}
audioElement.play();

2

如果您想在打开页面时播放音频,请这样做。

<script>
  function playMusic(){
  music.play();
  }
  </script>
<html>
  <audio id="music" loop src="sounds/music.wav" autoplay> </audio>
  </html>

并在游戏代码中需要时调用此playMusic()。


2

基于安全性要求,用户必须与网页互动才能获得音频,这是我基于阅读许多文章(包括本网站上的文章)时所做的操作

  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();

根据需要重复播放,但不要在游戏开始时暂停要收听的音频


1

您可以使用Web Audio API播放声音。那里有相当多的音频库,例如howler.js,soundjs等。如果您不担心旧的浏览器,则还可以在http://musquitojs.com/上进行检查。它提供了一个简单的API来创建和播放声音。

例如,播放声音,您要做的就是。

import $buzz from 'musquito';

const buzz = $buzz('gunfire.mp3');

buzz.play();

该库还支持音频精灵。


0

这是我在一个婴儿AI项目中想出的一些JS。我希望这能够为您提供帮助。

<!DOCTYPE html>
<html>
<head>
    <title>
        js prompt AI
    </title>
    <style>
        #button {
            border: 1px solid black;
            border-radius: 10px;
            font-size: 22px;
            height:65px;
            width:100px;
            text-align: center;
            line-height: 65px;
        }
    </style>
</head>
<body>

    <audio id="myAudio" src="./how_are_you.m4a"></audio>
    <p>To Interact with the AI please click the button</p>
    <div id=button>click</div>

    <script>

       var button = document.getElementById("button");
       function playBack() {
           button.addEventListener("click", function (){
            var talk = prompt("If you wish for the AI to respond type hi");
            var myAudio = document.getElementById("myAudio");

            if(talk === "hi") {
                    myAudio.play();
            }
           }) ;



       }
       playBack();
   </script>
</body>

</html>

0

只需使用此:

<video controls="" autoplay="" name="media"><source src="Sound URL Here" type="audio/mpeg" /></video>

或者,使其更简单:

<video controls="" autoplay="" name="media">

<source src="Sound URL Here" type="audio/mpeg" />

</video>

样品:

<video controls="" autoplay="" name="media">
<source src="https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3" type="audio/mpeg">
</video>

如果Chrome 73以外的其他浏览器都可以使用,则没有任何想法!!


这是一个简单,干净的答案。根本没有jQuery!
IMSMART

0

我在播放音频时遇到了一些问题,尤其是因为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 )

0

当您看到错误时,这是​​2020年的解决方案:

[错误]未处理的承诺拒绝: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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.