根据安全要求，用户必须与网页进行交互才能允许音频，这就是我的做法，基于阅读许多文章，包括在这个网站上

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

重复需要，但不要暂停你想听到的音频时，游戏开始

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

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

我有一些关于音频承诺对象返回的问题和一些关于用户与声音交互的问题，我最终使用了这个小对象，

我建议执行最接近用户使用的交互事件的播放声音。

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>

根据安全要求，用户必须与网页进行交互才能允许音频，这就是我的做法，基于阅读许多文章，包括在这个网站上

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

重复需要，但不要暂停你想听到的音频时，游戏开始

如果你得到以下错误:

DOMException: play()失败，因为用户 没有首先与文档交互。

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

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

setTimeout（（） => { document.getElementById（'mySound'）.play（）; }, 500) <audio id=“mySound” src=“sound.mp3”></audio>

声音将在0.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>

EDIT

为了解决@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');
});

请参见这里的实际代码示例。