使用Javascript播放音频？

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

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

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

#1楼

如果您不想弄乱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>元素相同。

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

#2楼

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

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

#3楼

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

请参见此处，以获取此代码的实际示例。

#4楼

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

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

#5楼

添加隐藏的音频并播放。

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

来源：oschina

链接：https://my.oschina.net/stackoom/blog/3154039

标签

jquery

howler.js