Использование внешней библиотеки с React для воспроизведения файлов .ogg в Safari - PullRequest
Новая
       54

Использование внешней библиотеки с React для воспроизведения файлов .ogg в Safari

1 голос
/ 10 июня 2019

Добрый вечер. Я пытаюсь реализовать воспроизведение звука ogg-opus в приложении реакции в Safari (оно не поддерживает формат .ogg). Я использую create-реакции-приложение, чтобы инициировать проект.

Я обнаружил библиотеку "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();
}

Я получаю следующую ошибку:

О-Demuxer-OGG-wasm.js версия = 1.6.0-20190226222001-c4648f0: 1 Uncaught SyntaxError: Неожиданный токен ogv.js: 1586 Uncaught TypeError: n [e] не является функцией в classWrapper (ogv.js: 1586) в ogv.js: 4593 в ogv.js: 1590 в ogv.js: 207 в Array.forEach () в HTMLScriptElement.done (ogv.js: 206)

Возможно, проблема в том, что некоторые библиотечные файлы и особенно 'ogv-demuxer-ogg-wasm.js' не могут быть загружены должным образом.

Любая помощь будет полезна, может быть, у кого-то есть решение для воспроизведения файлов .ogg в Safari другим способом. Спасибо!

[ОБНОВЛЕНО] Решение найдено, проверьте его ниже.

1 Ответ

0 голосов
/ 11 июня 2019

Хорошо, так что если кто-то захочет воспроизвести в приложении React .ogg / opus audio в 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 Audio, подробнее вы можете проверить это по ссылке выше.

Возможно, не лучшее решение, но, по крайней мере, оно работает:)

...