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事件中调用它），我尝试播放一个从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 未捕获的SyntaxError：意外令牌ogv.js：1586未捕获的TypeError： n [e]在classWrapper（ogv.js：1586）在ogv.js：4593处不是函数 Array.forEach（）处ogv.js：207处ogv.js：1590，位于 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

之后，在您的代码中：

所有导入后都需要lib：

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音频功能，有关更多信息，您可以在上面的链接中对其进行检查。

也许不是最好的解决方案，但至少可以奏效：）

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

1 个答案: