Javascript 如何播放音频？

我正在用HTML5和JavaScript制作一个游戏

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

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>

//如果需要，在哪里可以找到闪光主权财富基金。。。
soundManager.url='/path/to/swf files/'；
onready（函数（）{
soundManager.createSound({
id:'我的声音'，
url:“/path/to/an.mp3”
});
//…然后玩它
soundManager.play（“mySound”）；
});

---

下面是它的一个演示：

很简单，只需获取

音频元素并调用
play（）
方法：

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

看看这个例子：

揭示您可以做的其他一些很酷的事情，例如
load（）
，
pause（）
，以及
audio
元素的一些其他属性。
如果您不想弄乱HTML元素：

var audio=新音频（'audio_file.mp3'）；
音频播放（）；


函数播放（）{
var audio=新音频文件（'https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3');
音频播放（）；
}
播放音频
这是一个很老的问题，但我想补充一些有用的信息。主题发起者提到他正在“制作游戏”

。因此，对于每个需要音频进行游戏开发的人来说，有一个更好的选择，而不仅仅是

：

虽然网络音频不再需要插件，但音频标签为实现复杂的游戏和交互式应用程序带来了巨大的限制。Web音频API是一种高级JavaScript API，用于在Web应用程序中处理和合成音频。此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>

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

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

动态加载第一首歌曲：

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

var音频元件；
if（！audioElement）{
audioElement=document.createElement（'audio'）；
audioElement.innerHTML=“”
}
audioElement.play（）；
添加隐藏音频并播放

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

如果你想在页面打开时播放音频，那么就这样做




函数playMusic（）{
音乐。播放（）；
}
如果您有如下HTML标记，那么这是一个非常简单的解决方案：

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

您可以使用Web音频API播放声音。有相当多的音频库，如howler.js、soundjs等。如果你不担心旧浏览器，那么你也可以查看。它提供了一个简单的API来创建和播放声音

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

import $buzz from 'musquito';

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

buzz.play();

该库还支持音频精灵。
如果出现以下错误：

未捕获（承诺中）DomeException:play（）失败，因为用户
没有首先与文档交互

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

如果要自动加载音频，但不希望用户先与文档交互，可以使用
setTimeout


setTimeout（（）=>{
document.getElementById（'mySound'）.play（）；
}，500）
我遇到了一些与返回相关的问题，以及一些与用户与声音交互相关的问题，我最终使用了这个小对象

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

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>


js提示AI
#钮扣{
边框：1px纯黑；
边界半径：10px；
字体大小：22px；
高度：65px；
宽度：100px；
文本对齐：居中；
线高：65px；
}
要与AI交互，请单击按钮

点击
var button=document.getElementById（“按钮”）；
函数回放（）{
按钮。addEventListener（“单击”），函数（）{
var talk=提示（“如果您希望AI响应，请键入hi”）；
var myAudio=document.getElementById（“myAudio”）；
如果（谈话==“嗨”）{
myAudio.play（）；
}
}) ;
}
播放（）；
只要用这个：

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



样本：
我在播放音频时遇到了一些问题，尤其是因为Chrome更新了用户必须首先与文档交互的内容

然而，在我发现的几乎所有解决方案中，JS代码都必须主动设置侦听器（例如，按钮单击）来接收用户事件，以便播放音频

在我的例子中，我只是想让我的游戏在玩家与BGM交互时立即播放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年的解决方案：

[错误]未处理的承诺拒绝：不支持错误：不支持该操作。
<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();
}