使用附加组件 SDK 加载音频文件并使用 Aurora.js 播放

Loading an audio file with the Add-On SDK and playing it with Aurora.js

本文关键字：Aurora js 播放 文件 加载 组件 SDK 音频      更新时间：2023-09-26

我目前正在尝试使用附加SDK为Mozilla Firefox编写音乐播放器附加组件。我正在使用 Aurora.js（维基）来处理音频文件的加载/解复用/解码

我目前已经让插件工作，因此您可以选择带有 HTML 文件输入的音频文件，这非常简单。

    <input type="file" id="file-selector" />
    <script>
        var fileSelector = document.getElementById("file-selector");
        fileSelector.onchange = function() {
            var audioFile = fileSelector.files[0];
            var audioPlayer = AV.Player.fromFile(audioFile);
            audioPlayer.play();
        };
    </script>

不过，我目前正在尝试做的是从附加 SDK 返回的文件，而不是从 HTML 页面上的输入中读取文件，然后创建一个 AV。选手。使用 sdk/io/file 和 sdk/io/byte-streams 模块读取文件非常简单。

问题是我不知道如何正确构建AV。来自此数据的播放器。从它的样子：

  1. AV.Player.fromFile(x)的工作原理是从AV.Asset.fromFile(x)构造AV.Asset
  2. AV.Asset.fromFile(x)构造一个AV.Asset与AV.FileSource(x)
  3. AV.FileSource是通过创建FileReader和以 Blob 的形式读取文件中的数据

我一直在试图弄清楚如何使用io/file.read（filePath，"br"）返回的字节数组创建一个Blob，但没有运气。我尝试创建一个类似于具有大小、类型和切片方法的 Blob 的对象，但这似乎也不起作用。

由于您将（或至少应该）在某些内容脚本（小部件，面板等）中使用Aurora，因此事情会稍微复杂一些。

  1. 读取main.js中的数据，例如通过您已经提到的file模块。
  2. 通过消息传递将该数据传递给内容脚本。

  3. 在内容脚本中，接收消息，将字节包装在Uint8Array中，然后执行 Aurora 操作：

    addon.port.on("bytes-loaded", function(stream) {
  var data = new Uint8Array(stream.length);
  for (var i = 0; i < stream.length; ++i) {
      data[i] = String.charCodeAt(stream[i]) & 0xff;
  }
  avPlayer = AV.Player.fromBuffer(data);
});

file模块并不是很好，因为它是一个同步 API，在读取文件时会阻塞，但至少有一个替代方案。

在此构建器中可以找到一个完整的示例，其中包含NetUtil异步文件读取，并且无需在 Javascript 土地中将字符串转换为数组，但请确保替换硬编码路径。 ;)

相关文章：