使用外部库和 React 在 Safari 中播放 .ogg 文件

Question

晚上好。 我正在尝试在 Safari 的反应应用程序中实现播放 ogg-opus 音频（它不支持 .ogg 格式）。我使用 create-react-app 来初始化项目。

我找到了“ogv.js”库，它实际上有助于在几乎所有现代浏览器中播放音频文件。但实际上无法让它工作 (https://github.com/brion/ogv.js/issues/525)。

在所有导入之后，我要求在我的 PlayerComponent.js 文件的顶部

var ogv = require('ogv');

在那之后，在我的play() 函数中（它是从按钮的onClick 事件中调用的）我正在尝试播放我从 API 接收的 ogg 文件：

play = () => {
   var player = new OGVPlayer();
   var blob = new Blob([new Uint8Array(this.props.audioData)]);
   player.src = URL.createObjectURL(blob);
   player.play();
}

我收到以下错误：

ogv-demuxer-ogg-wasm.js?version=1.6.0-20190226222001-c4648f0:1 Uncaught SyntaxError: Unexpected token ogv.js:1586 Uncaught TypeError: n[e] 不是 ogv.js:4593 的 classWrapper (ogv.js:1586) 的函数 ogv.js:1590 at ogv.js:207 at Array.forEach () at HTMLScriptElement.done (ogv.js:206)

问题可能是某些库文件，尤其是“ogv-demuxer-ogg-wasm.js”无法正确加载。

任何帮助都会有所帮助，也许有人有解决方案以其他方式在 Safari 中播放 .ogg 文件。谢谢！

[更新] 找到解决方案，请在下方查看。

Answer 1

好的，如果有人想在 Safari 中播放 React 应用程序 .ogg/opus 音频，这就是解决方案（使用 ogv.js 库）。

首先，将库文件放入您的 React 应用程序。 对于您需要的作品：

• ogv-demuxer-ogg.js
• ogv-demuxer-ogg-wasm.js
• ogv-demuxer-ogg-wasm.wasm
• ogv-decoder-audio-opus.js
• ogv-decoder-audio-opus-wasm.js
• ogv-decoder-audio-opus-wasm.wasm
• ogv-worker-audio.js

之后在您的代码中：

在所有导入后都需要该库：

var ogv = require('ogv');

为PUBLIC文件夹中的文件设置基本路径：

// process.env.PUBLIC_URL simply a ref for the root folder of the react app
ogv.OGVLoader.base = process.env.PUBLIC_URL + '/ogv'; 

那么你可以如下使用它：

play = () => {
   var player = new OGVPlayer();
   // this.props.audioData just some audio data
   var blob = new Blob([new Uint8Array(this.props.audioData)]);
   player.src = URL.createObjectURL(blob);
   player.play();
}

这个播放器有一些类似于默认 HTML5 音频的能力，更多你可以在上面的链接中查看。

也许不是最好的解决方案，但至少它有效:)