Using ogv.js with a React app?

[peracc]

Basically I'm trying to implement playing ogg-opus audio in react app in Safari (it doesn't support .ogg format). I use create-react-app to init the project.
I tried just installing it and importing it in code, but when I'm trying to play the audio I get this error:

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)

I think I get this because I should somehow preload it by including ability to preload *.wasm files in my webpack.config.js, and I tried editing it manually, but I couldn't make it work.

Thanks for help in advance.

[bvibber]

Yeah, it's probably having trouble loading the .wasm file, which needs to be loaded from an actual file on the server. (Currently the error messages are not very nice in this case.)

I'm not too familiar with React so don't know if it's specifically breaking anything; but roughly what you want to do is:

• make sure the .js and .wasm files for ogv-decoder-* and ogv-demuxer-* get treated as file assets, and not magic-inlined into a JavaScript bundle
• make sure the filenames are not altered and they are all in the same directory
• set OGVLoader.base = '/path/to/blah' if the assets aren't conveniently in the current directory (so if your app uses URLs with multiple directory levels in them, you may need to set this)

Double-check in the browser's debugger 'network' panel that the .wasm file is being loaded and that it has the correct Content-Type of 'application/wasm' as well, if it's not right that can trip things up.

[bvibber]

(Note that for current webpack versions, there's special handling of .wasm files that takes over even past explicit use of file-handler. You may have to jump through some hoops to disable it if you're including the assets that way.)

[peracc]

I tried putting all lib files into public folder assets/ogv and then setting ogv.OGVLoader.base = '../assets/ogv' but it didn't really help. In my network tab I'm still getting this

ogv-demuxer-ogg-wasm.js?version=1.6.0-20190226222001-c4648f0 | 200 | script | ogv.js:211 | 1.2 KB | 3 ms

and the same error in console output. By the way the above file is the only that is being loaded on the page.

(Note that for current webpack versions, there's special handling of .wasm files that takes over even past explicit use of file-handler. You may have to jump through some hoops to disable it if you're including the assets that way.)

I don't actually have any special handling of .wasm files in my webpack.config.

[bvibber]

No errors or failures to load? Odd...

[bvibber]

Can you describe how the assets folder is defined and copied to the web server in the webpack config? Is it there when you follow a direct URL? Is there a sample deployment I can try to debug?

[peracc]

Thanks to your help I understood I should somehow use public folder and handle lib files manually. So I didn't have to make any changes in my webpack.config.js to make it work.
I'm stupid I didn't properly read React docs about Using the Public Folder. So basically what I did is copied lib src to the public directory of my React app, and then in the code:

1. Required it after all imports
2. Set the base
3. Created an instance of the player and successfully used it.

var ogv = require('ogv')
...
ogv.OGVLoader.base = process.env.PUBLIC_URL + '/ogv';
...
play = () => {
   var player = new ogv.OGVPlayer();
   //play an ogg file
}

However I didn't have a chance to test it in the Safari, but at least it now works in Chrome/Mozilla.
I'll update after I try it in Safari.

In addition I don't want all the files to work with .webm and .vorbis audio, I acutally need only tools to work with .opus files. Which files should I only leave in my PUBLIC folder to support only .opus audio?

[bvibber]

Awesome :D

For .opus files you'll need these:

• 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

The versions without the "-wasm" suffix are for older browser versions without WebAssembly support, so if you're certain your browser requirements already exclude those you could drop them to save few kb.

If you're not supporting IE you also don't need the dynamicaudio.swf file, which is only used for IE 10/11. The rest of the files should be the other codecs, which only get loaded on demand so you can freely drop them if you know they won't be used.

[peracc]

@Brion
Additionally to these 6 files I also had to leave

• ogv-worker-audio.js

Because otherwise I was getting an error

ogv-worker-audio.js?version=1.6.0-20190226222001-c4648f0:1 Uncaught SyntaxError: Unexpected token <

I also tested in Safari 12.1.1 and it's playing .ogg now!
However I don't know why but the 'ended' event is being fired before the audio playing is actually done.

[bvibber]

Whoops, I forgot the worker file -- yes you need that too. :)

Hmm, can you file a new issue for the 'ended-fires-early', if possible with a sample file? That's probably an audio-specific bug (IIRC if there's video it'll delay the 'ended' event until it's out of frames, but might not be handling audio correctly). Then we can close this one out and I'll try to track the other down.

[peracc]

Sure, I'll try to test more and then open issue if I get more on the early 'ended' event problem. Thanks!

[tomivm]

Hello! Thanks for your help! this Work for me too! The only disadvantage is that using ogv player my audio file is not cached. Would you happen to know why this happens? Do you know of a way to fix it?
@Brion @peracc