如何播放音频？

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

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

1326691 次浏览
小开

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 itsoundManager.play('mySound');});</script>

这是它在行动中的演示：http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/

小开

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

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

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

本网站揭示了您可以做的一些其他很酷的事情，例如load()、pause()和audio元素的一些其他属性。

小开
最佳答案

如果你不想弄乱超文本标记语言元素：

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

function play() {var audio = new Audio('https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3');audio.play();}
<button onclick="play()">Play Audio</button>

This uses the HTMLAudioElement interface, which plays audio the same way as the <audio> element.

If you need more functionality, I used the howler.js library and found it simple and useful.

<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/cc0-audio/t-rex-roar.mp3'],volume: 0.5,onend: function () {alert('Finished!');}});sound.play()</script>

小开

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

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

小开

轻松使用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>

编辑

为了解决@造口的问题，以下是您如何使用这种方法来玩播放列表：

在一个对象中设置你的歌曲：

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

有关此代码的实际示例，请参阅这里。

小开

我用这种方法来播放声音…

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

添加一个隐藏的<audio>元素并按所示播放它。

function playSound(url) {var ourAudio = document.createElement('audio'); // Create a audio element using the DOMourAudio.style.display = "none"; // Hide the audio elementourAudio.src = url; // Set resource to our URLourAudio.autoplay = true; // Automatically play soundourAudio.onended = function() {this.remove(); // Remove when played.};document.body.appendChild(ourAudio);}
小开

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

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

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

小开

非常简单的解决方案，如果你有一个超文本标记语言，如下所示：

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

只需使用JavaScript来播放它，就像这样：

document.getElementById('myAudio').play();
小开 
new Audio('./file.mp3').play()
小开 
var song = new Audio();song.src = 'file.mp3';song.play();
小开

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

例如，要播放声音，你所要做的就是。

import $buzz from 'musquito';
const buzz = $buzz('gunfire.mp3');
buzz.play();

该库还支持Audio Sprites。

小开

如果您遇到以下错误：

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

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

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

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

The sound will start after 0.5 second.

小开

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

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

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>
小开

这是我在一个婴儿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>
小开

只需使用此：

<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>

不知道这是否适用于Chrome73以外的其他浏览器！

小开

我在播放音频时遇到了一些问题，特别是因为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 )
小开

以下是2020年您看到错误时的解决方案：

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

小开

随着安全要求，用户必须与允许音频的网页进行交互，这就是我如何做到的，基于阅读许多文章，包括在本网站上

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

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

小开

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

像这样：

var audio = new Audio('audio/path.mp3');
function playSound(){audio.play();}

更多细节请参见这个问题

小开

在React中，您可以使用ref：

// typescriptconst audRef = useRef(null);const playAudio = () => {(audRef.current as any).play();}...// html<audio controls src={your_audio} ref={audRef} /><button onClick={playAudio}>Play</button>
小开 
const playAudio = (path) => {new Audio(path ?? 'defaultPath').play()}    
playAudio('path')`

提交答案