如何播放音频？
Posted
技术标签:
【中文标题】如何播放音频？【英文标题】：How to play audio? 【发布时间】：2012-03-14 05:24:09 【问题描述】：我正在使用 html5 和 javascript 制作游戏。
如何通过 JavaScript 播放游戏音频？
【问题讨论】：
既然是html5，就有<audio>。该元素将具有适当的 JS 钩子，用于“播放”、“暂停”等......
我打赌你想知道所有音频方法的文档在哪里：***.com/questions/4589451/…
【参考方案1】：
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/
【讨论】：
我在macos的Safari和Chrome（最新版本，2022）都试了demo，都没有声音。 @endavid 这是一个已有 10 年历史的答案，我不会再推荐它了。使用上面 Uri 接受的答案：***.com/a/18628124【参考方案2】：很简单，只需获取您的audio 元素并调用play() 方法：
document.getElementById('yourAudioTag').play();
看看这个例子：http://www.storiesinflight.com/html5/audio.html
This site 揭示了您可以做的其他一些很酷的事情，例如load()、pause()，以及audio 元素的一些其他属性。
【讨论】：
这也适用于没有 UI 交互的 iOS（放置带有自动播放和静音的音频标签）然后设置静音 false 并调用播放 不能在使用onload激活的函数中使用，见this。但是，使用onclick 对我来说效果很好。用户首先需要与页面交互才能播放声音（这是常规、预期和用户友好的行为）。
这很容易，但现在不是;)【参考方案3】：
如果你不想弄乱 HTML 元素：
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>这使用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/cc0-audio/t-rex-roar.mp3'],
volume: 0.5,
onend: function ()
alert('Finished!');
);
sound.play()
</script>【讨论】：
此方法适用于播放 mp3，但不适用于 wav 文件。有什么方法可以播放 wav 文件吗？ @user3293156 此方法支持与 HTML5 的<audio> 相同的格式。***有一个audio format compatibility table。 new Audio() 可以在除 Internet Explorer 之外的所有浏览器中播放 WAV 文件。
@RoryO'Kane 这样每个人都可以播放微软的音频格式，除了微软？大声笑
几个警告：（1）Firefox won't play mp3。您将需要一个 ogg 文件。 (2)Safari/iOS won't play if you're serving the content over https。您需要有一个有效的证书。
请注意，从 2018 年 4 月起，Chrome 将不会播放音频文件，除非用户至少在文档中单击过一次。见here。【参考方案4】：
这是一个很老的问题，但我想添加一些有用的信息。话题发起者提到他是"making a game"。因此，对于需要音频进行游戏开发的每个人来说，除了<audio> 标签或HTMLAudioElement，还有更好的选择。我认为你应该考虑使用Web Audio API：
虽然网络上的音频不再需要插件，但音频标签为实现复杂的游戏和交互式应用程序带来了重大限制。 Web Audio API 是一个高级 JavaScript API，用于在 Web 应用程序中处理和合成音频。此 API 的目标是包含现代游戏音频引擎中的功能以及现代桌面音频制作应用程序中的一些混合、处理和过滤任务。
【讨论】：
这应该是这里公认的答案。尤其是游戏开发。那里的例子很容易理解。【参考方案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');
);
请参阅here，了解此代码的实际操作示例。
【讨论】：
这会同时播放所有带有 class= "my_audio" 的音频标签。你如何一个接一个地播放（在播放列表中）？ @stomy 您是否将其发布为 *** 上的问题？如果你让我知道。我可以帮你。否则，我会提供这个——你可以（在你开始播放歌曲之后）监听要发出的ended 事件并开始列表中的下一个音频文件（大概你在 DOM、JS 中跟踪内存等）。 developer.mozilla.org/en-US/docs/Web/Events/ended
@stomy 请检查我的答案中的 EDIT 以创建一个连续播放歌曲的播放列表。【参考方案6】：
我用这个方法播放声音...
var audioElement;
if(!audioElement)
audioElement = document.createElement('audio');
audioElement.innerHTML = '<source src="' + '/audio/sound.mp3'+ '" type="audio/mpeg" />'
audioElement.play();
【讨论】：
【参考方案7】：添加隐藏音频并播放。
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);
【讨论】：
【参考方案8】：如果您想在页面打开时播放音频，请这样做。
<script>
function playMusic()
music.play();
</script>
<html>
<audio id="music" loop src="sounds/music.wav" autoplay> </audio>
</html>并在需要时在游戏代码中调用此 playMusic()。
【讨论】：
【参考方案9】：如果您有如下 HTML 标记，则非常简单的解决方案：
<audio id="myAudio" src="some_audio.mp3"></audio>
只要用 JavaScript 播放就行了，像这样：
document.getElementById('myAudio').play();
【讨论】：
您的意思是使用 还是 。只是好奇。 我使用了 标签。 Ben，你的例子有一个不正确的结束标签，这就是@Cooper 问这个问题的原因。我用正确的结束标签编辑了答案。【参考方案10】：new Audio('./file.mp3').play()
【讨论】：
【参考方案11】：var song = new Audio();
song.src = 'file.mp3';
song.play();
【讨论】：
【参考方案12】：您可以使用 Web Audio API 来播放声音。那里有很多音频库，例如 howler.js、soundjs 等。如果您不担心旧浏览器，那么您也可以查看 http://musquitojs.com/。它提供了一个简单的 API 来创建和播放声音。
例如，要播放声音，您所要做的就是。
import $buzz from 'musquito';
const buzz = $buzz('gunfire.mp3');
buzz.play();
该库还支持音频精灵。
【讨论】：
【参考方案13】：如果您收到以下错误：
Uncaught (in promise) DOMException: play() failed 因为用户 没有先与文档进行交互。
这意味着用户需要首先与网站进行交互（如错误消息所述）。在这种情况下，您需要使用click 或只是另一个事件侦听器，以便用户可以与您的网站进行交互。
如果您想自动加载音频并且不希望用户首先与文档进行交互，您可以使用setTimeout。
setTimeout(() =>
document.getElementById('mySound').play();
, 500)<audio id="mySound" src="sound.mp3"></audio>声音会在 0.5 秒后开始。
【讨论】：
【参考方案14】：我遇到了一些与 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>
【讨论】：
如果我从 JS 触发自动播放，则无法在 Safari 上工作。 @maki10 嗨，我在 safari 桌面版本 12.0.3 (14606.4.5) 中对其进行了测试，它在这里工作：jsfiddle.net/xf5zyv4q/5 我更新了我的问题的链接jsfiddle.net/6431mfb5。对我来说，自动播放仅在 safari 和更新版本中首次使用。 @maki10 因为您在没有用户交互的情况下调用它，如果没有用户交互（如点击触摸），自动播放将无法工作，删除最后一行：soundPlayer.play('interactive-examples.mdn.mozilla.net/media/examples/…);【参考方案15】：这是我在一个正在使用的婴儿 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】：就用这个吧：
<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！【参考方案17】：我在播放音频时遇到了一些问题，尤其是在 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】：当您看到错误时，这是 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】：根据安全要求，用户必须与网页交互才能允许音频，这就是我的做法，基于阅读了许多文章，包括本网站上的文章
-
在您的 html 中定义所需的音频文件
有一个点击开始游戏的按钮
单击按钮后，播放并暂停所有音频文件栏，即您要在开头播放的文件
由于所有音频文件都在同一个 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();
根据需要重复，但不要在游戏开始时暂停您想听到的音频
【讨论】：
【参考方案20】：如果您希望即使当前未选择浏览器选项卡也能播放声音，您必须在页面加载时加载音频资源。
像这样：
var audio = new Audio('audio/path.mp3');
function playSound()
audio.play();
更多详情请参阅this问题
【讨论】：
【参考方案21】：在反应中，你可以使用 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>
【讨论】：
以上是关于如何播放音频？的主要内容，如果未能解决你的问题，请参考以下文章
在IOS核心音频中，如何找到文件播放器音频单元的真实当前播放头位置？