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。

附：利用JavaScript实现音频文件的播放和暂停

HTML5 规定了一种通过 audio 元素来包含音频的标准方法。

audio 元素能够播放声音文件或者音频流。

注意看，a.paused表示当前音频的状态，而音频的暂停和播放对应的方法分别为pause()和play() ——-(自认为很值得注意的地方 我当时就犯了这种错误)

<button onclick="clickA(this)">播放/暂停</button>
<audio id="audio" src="raw/1.mp3">您的浏览器不支持</audio>
<script>
    var a = document.getElementById("audio");
    function clickA() {
        //如果暂停   点击即可播放
        if (a.paused) {
            // 播放
            a.play();
            //如果播放  点击暂停
        } else if (a.play()) {
            //暂停
            a.pause();
        }
    }
</script>

总结

到此这篇关于JavaScript中播放音频文件的几种常用方法的文章就介绍到这了,更多相关JS播放音频文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论