在 JavaScript 中播放音频文件
![在 JavaScript 中播放音频文件](/img/JavaScript/feature-image---play-audio-javascript.webp)
在本文中,我们将学习如何在 JavaScript 中播放音频文件。
我们可以使用 <audio>
标签将音频文件添加到页面中。这是播放音频文件而不涉及 JavaScript 的最简单方法。<audio>
标签的 src
属性指定音频文件的地址。它还具有其他有用的属性,例如控制
,自动播放
和循环
。但是有时候,我们想要自动控制并自动播放声音,例如在游戏中,单击或任何其他事件时。在这种情况下,我们希望 JavaScript 根据我们的逻辑来控制和播放文件。
在 JavaScript 中使用 .play()
播放音频文件
我们只需创建音频对象实例即可使用 JavaScript 加载音频文件,即使用 new Audio()
。加载音频文件后,我们可以使用 .play()
函数对其进行播放。
const music = new Audio('adf.wav');
music.play();
music.loop = true;
music.playbackRate = 2;
music.pause();
qqazszdgfbgtyj
在上面的代码中,我们加载一个音频文件,然后简单地播放它。JavaScript 为我们提供了很多灵活性和大量功能。我们可以控制播放速率,循环播放音频,暂停和播放声音。唯一的问题是,一次处理多个声音,与最新技术相比,其控制能力有限。
使用 Web Audio API 播放音频文件
尽管设置起来有些麻烦,但是 Web Audio API 为我们提供了很多灵活性和对声音的控制。它是对典型 HTML5 音频的重大改进,并允许复杂的音频处理。它使用 HTML5 音频将音频元素表示为称为音频上下文的有向图样结构上的节点。音频源和目的地之间可以连接许多类型的节点,例如音量节点,可以帮助我们操纵音量。
<audio src='audio_file.mp3'></audio>
const audioContext = new AudioContext();
const element = document.querySelector(audio);
const source = audioContext.createMediaElementSource(element);
source.connect(audioContext.destination)
audio.play();
在这里,我们首先初始化音频上下文,并获得对音频文件源的引用。然后,我们将该源连接到全球目标,然后完成音频设置。
使用 howler.js
库以 JavaScript 播放音频文件
howler.js
是一个音频处理库。它使我们能够利用 Web Audio API 的功能和 HTML 5 Audio 的简单性。它广泛用于 react 类组件,以处理基于浏览器的音频,尤其是在播放多个音频源时。它可以使用 Howler 对象控制全局音频上下文,然后使用 Howl 控制音频或一组音频。
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.1/howler.min.js"></script>
<script>
var sound = new Howl({
src: ['https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3'],
volume: 1.0,
onend: function () {
alert('We finished with the setup!');
}
});
sound.play()
</script>
除 Internet Explorer 以外的所有主要浏览器都支持所有这些方法。Internet Explorer 不支持 Web Audio API 和 howler.js
。
Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.
LinkedIn