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

Question

晚上好。我试图在Safari中实现ogg-opus音频在react应用程序中的播放(它不支持.ogg格式)。我使用创建-反应-应用程序在该项目。

我找到了"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 :意外令牌ogv.js:1586 Uncaught TypeError: ne不是classWrapper (ogv.js:1586)、ogv.js:4593 at ogv.js:4593、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');

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

// 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音频能力，更多您可以在上面的链接检查它。

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