用Javascript播放音频？

时间：2012-02-23 18:49:07

标签： javascript html5 html5-audio

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

我如何通过Javascript播放游戏音频？

21 个答案:

答案 0 :(得分：1127)

如果你不想搞乱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> element相同的方式播放音频。

如果您需要更多功能，我使用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>

答案 1 :(得分：172)

这很容易，只需获取audio元素并调用play()方法：

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

查看此示例：http://www.storiesinflight.com/html5/audio.html

This site揭示了您可以执行的其他一些很酷的事情，例如load()，pause()以及audio元素的其他一些属性。

答案 2 :(得分：36)

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/

答案 3 :(得分：27)

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

  

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

答案 4 :(得分：20)

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

有关此代码的示例，请参阅here。

答案 5 :(得分：11)

添加隐藏的音频并播放。

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

答案 6 :(得分：11)

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

答案 7 :(得分：9)

如果出现以下错误：

  

未捕获（承诺）的DOMException：play（）失败，因为用户   没有先与文档互动。

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

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

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

声音将在0.5秒后开始。

答案 8 :(得分：5)

非常简单的解决方案，如果你有一个HTML标签如下：

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

只需使用JavaScript即可播放，如下所示：

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

答案 9 :(得分：4)

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

答案 10 :(得分：3)

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

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

答案 11 :(得分：3)

我遇到了一些与audio promise object返回相关的问题，还有一些与用户与声音交互的问题，最终我使用了这个小对象

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

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>

答案 12 :(得分：2)

如果您想在打开页面时播放音频，请执行此操作。

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

并在游戏代码中随时调用此playMusic（）。

答案 13 :(得分：1)

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

例如，要播放声音，您只需要做的。

import $buzz from 'musquito';

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

buzz.play();

该库还支持音频精灵。

答案 14 :(得分：1)

出于安全性要求，用户必须与网页进行交互才能获得音频，这是我基于阅读许多文章（包括在此站点上）所做的操作

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

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

答案 15 :(得分：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>

答案 16 :(得分：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以外的其他浏览器，则没有任何想法！

答案 17 :(得分：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 )

答案 18 :(得分：0)

这是您看到错误的2020年解决方案：

  

[错误]未处理的承诺拒绝：NotSupportedError：不支持该操作。       （匿名功能）       拒绝承诺       玩       （匿名函数）（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。

答案 19 :(得分：0)

如果您希望即使当前未选择浏览器选项卡也能播放声音，则必须在页面加载时加载音频资源。

像这样：

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

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

有关更多详细信息，请参见this问题

答案 20 :(得分：0)

在反应中，你可以使用 ref:

// typescript
const audRef = useRef(null);
const playAudio = () => {
  (audRef.current as any).play();
}
...
// html
<audio controls src={your_audio} ref={audRef} />
<button onClick={playAudio}>Play</button>
相关问题
最新问题