如何播放音频?

IT技术 javascript html html5-audio
2021-01-20 05:26:18

我正在使用 HTML5 和 JavaScript 制作游戏。

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

6个回答

如果您不想弄乱 HTML 元素:

var audio = new Audio('audio_file.mp3');
audio.play();

这使用了HTMLAudioElement接口,它以与<audio>element相同的方式播放音频


如果您需要更多功能,我使用了howler.js库,发现它简单而有用。

请注意,从 2018 年 4 月开始,Chrome 将不会播放音频文件,除非用户至少在文档中单击过一次。这里
2021-03-11 05:26:18
此方法适用于播放 mp3,但不适用于 wav 文件。有没有办法播放wav文件?
2021-03-17 05:26:18
@RoryO'Kane 这样除了微软之外,每个人都可以播放微软的音频格式吗?哈哈
2021-03-17 05:26:18
几个警告:(1) Firefox 不会播放 mp3您将需要一个 ogg 文件。(2)如果您通过 https 提供内容,则 Safari/iOS 将无法播放你需要有一个有效的证书。
2021-03-17 05:26:18
@user3293156 此方法支持与 HTML5 相同的格式<audio>维基百科有一个音频格式兼容性表new Audio()可以在除 Internet Explorer 之外的所有浏览器中播放 WAV 文件。
2021-03-25 05:26:18

这很简单,只需获取您的audio元素并调用该play()方法:

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

看看这个例子:http : //www.storiesinflight.com/html5/audio.html

本网站揭示的其他一些很酷的事情可以做,比如load()pause()和几个其他属性audio的元素。

这也适用于没有 UI 交互的 iOS(将音频标签与自动播放和静音)然后设置静音假并调用播放
2021-03-19 05:26:18
它不能在激活 using 的函数中使用onload,请参阅但是,使用onclick. 用户首先需要与页面交互才能播放声音(这是常规的、预期的和用户友好的行为)。
2021-03-23 05:26:18

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/

这是一个很老的问题,但我想添加一些有用的信息。话题发起人提到他是"making a game"因此,对于需要音频进行游戏开发的每个人来说,除了<audio>标签或HTMLAudioElement. 我认为您应该考虑使用Web Audio API

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

这应该是这里接受的答案。尤其是游戏开发。那里的例子很容易理解。
2021-03-30 05:26:18

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

有关此代码的示例,请参见此处

@stomy 你在 StackOverflow 上发布了它自己的问题吗?如果你让我知道。我可以帮你。否则,我会提供这个——你可以(在你开始播放一首歌之后)监听ended要发出事件并启动列表中的下一个音频文件(大概你正在 DOM、JS 内存等中跟踪)。developer.mozilla.org/en-US/docs/Web/Events/ended
2021-03-19 05:26:18
这会同时播放 class = "my_audio" 的所有音频标签。你如何一个接一个地播放(在播放列表中)?
2021-03-30 05:26:18
@stomy 请检查我的答案中的编辑以创建一个连续播放歌曲的播放列表。
2021-04-04 05:26:18