使用带有 React 的外部库在 Safari 中播放 .ogg 文件

Question

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

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

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

var ogv = require('ogv');

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

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] is not a function at classWrapper (ogv.js:1586) at ogv.js:4593 at 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

好的，所以如果有人想在 React 应用程序中播放。ogg/opus Safari 中的音频，这是解决方案（使用 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的音频能力，更多的你可以在上面的link中查看。

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

使用带有 React 的外部库在 Safari 中播放 .ogg 文件

Using external library with React to play .ogg files in Safari

javascript

safari

ogg

reactjs