用Javascript播放音频？-Java 学习之路

510

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

我怎么能通过Javascript播放游戏音频？

13 回答

5
如果你有一个HTML标签，这是非常简单的解决方案：
```
<audio id="myAudio" src="some_audio.mp3"></audio>
```
只需使用JavaScript即可播放，如下所示：
```
document.getElementById('myAudio').play();
```
回复于 2024-04-29T04:08:15+08:00
166
您可以使用Web Audio API播放声音 . 有很多音频库，如howler.js，soundjs等 . 如果你不担心旧的浏览器，那么你也可以检查http://musquitojs.com/ . 它提供了一个简单的API来创建和播放声音 .

例如，播放声音你所要做的就是 .
```
import $buzz from 'musquito';

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

buzz.play();
```
该库还支持Audio Sprites .
回复于 2024-04-29T04:08:15+08:00
25
如果你不想搞乱HTML元素：
```
var audio = new Audio('audio_file.mp3');
audio.play();
```
这使用HTMLAudioElement接口，它以与<audio> element相同的方式播放音频 .

如果您需要更多功能，我使用了howler.js库，发现它简单实用 .
回复于 2024-04-29T04:08:15+08:00
17
如果您想在打开页面时播放音频，请执行此操作 .
```
<script>
  function playMusic(){
  music.play();
  }
  </script>
<html>
  <audio id="music" loop src="sounds/music.wav" autoplay> </audio>
  </html>
```
并在游戏代码中随时调用此playMusic（） .
回复于 2024-04-29T04:08:15+08:00

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

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

回复于 2024-04-29T04:08:15+08:00

9
http://www.schillmania.com/projects/soundmanager2/

SoundManager 2提供了一个易于使用的API，允许在任何现代浏览器中播放声音，包括IE 6 . 如果浏览器没有't support HTML5, then it gets help from flash. If you want stricly HTML5 and no flash, there'的设置， 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/
回复于 2024-04-29T04:08:15+08:00
1026

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

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

回复于 2024-04-29T04:08:15+08:00
5
如果您收到以下错误：

Uncaught（在promise中）DOMException：play（）失败，因为用户没有先与文档交互 .

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

如果要自动加载音频并且不希望用户首先与文档交互，则可以使用 setTimeout .
```
setTimeout(() => {
  document.getElementById('mySound').play();
}, 500)
```
```
<audio id="mySound" src="sound.mp3"></audio>
```
声音将在0.5秒后开始 .
回复于 2024-04-29T04:08:15+08:00
9
这很简单，只需获取 audio 元素并调用 play() 方法：
```
document.getElementById('yourAudioTag').play();
```
看看这个例子：http://www.storiesinflight.com/html5/audio.html

This site揭示了你可以做的其他一些很酷的事情，例如 load() ， pause() 和 audio 元素的一些其他属性 .
回复于 2024-04-29T04:08:15+08:00
35
```
new Audio('./file.mp3').play()
```
回复于 2024-04-29T04:08:15+08:00

var song = new Audio();
song.src = 'file.mp3';
song.play();

回复于 2024-04-29T04:08:15+08:00

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

Set your songs in an object:

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

Use the trigger and play functions as before:

$(".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);
      }
 }

Load the first song dynamically:

keys = Object.keys(playlist);
$('.my_audio').append("<source id='sound_src' src=" + playlist[keys[0]] + " type='audio/mpeg'>");

Reset the audio source to the next song in the playlist, when the current song ends:

count = 0; 
$('.my_audio').on('ended', function() { 
   count++;  
   $("#sound_src").attr("src", playlist[keys[count]])[0];
   $(".my_audio").trigger('load');
   play_audio('play');
});

有关此代码的示例，请参阅here .

回复于 2024-04-29T04:08:15+08:00

添加隐藏的音频并播放 .

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

回复于 2024-04-29T04:08:15+08:00

用Javascript播放音频？

13 回答

相关问题