Воспроизведение фрагмента MP3 в приложении cordova

66
5

В моем webapp пользователи могут записывать свой голос, а затем воспроизводить его, чтобы услышать результат.

Это приложение nodejs (meteor), и запись выполняется с объектами Mp3LameEncoder, которые позволяют мне получить MP3-блок. Как только я его получил, я использую windowURL, чтобы получить URL-адрес blob. Затем я добавляю этот url как атрибут src в свой аудиофайл html5. На настольных/мобильных браузерах это отлично работает (в большинстве браузеров).

input.disconnect();
processor.disconnect();

if ( encodingProcess === 'direct' ) {
if ( finish ) {
blob = encoder.finish();
console.log("Stopping and saving", blob);
t.$('#playback').attr("src", window.URL.createObjectURL(blob));
//saveRecording(blob);
} else {
encoder.cancel();
}
} else {
worker.postMessage({ command: finish ? 'finish' : 'cancel' });
}

Но в моем приложении cordova мне нечего делать: все, что я пробовал, я всегда не мог воспроизвести звук. Правильно установлен src attr, но когда я использую собственную кнопку управления воспроизведением, ничего не происходит. Но blob там хорошо, и его можно загрузить на сервер хранилища, и после этого он правильно звучит.

Кроме того, в моем приложении cordova, я могу слушать аудио с помощью <audio> когда источник находится на удаленном сервере (пусть это мой AWS-ведро или статический файл на моем сервере приложений).

Я решил попытаться использовать плагин media cordova для записи и воспроизведения звука, а затем прозрачно загружать записанный кадр, но я не могу использовать микрофон как для Media() и для JS lib одновременно.

Поскольку у меня есть этот blob где-то в моей памяти (я могу загрузить его, даже с помощью приложения cordova), как я могу сделать его воспроизводимым перед загрузкой?

Спасибо вам.

спросил(а) 2016-09-01T16:26:00+03:00 3 года, 10 месяцев назад
1
Решение
77

На некоторых платформах элементы мультимедиа HTML5 не могут воспроизводить капли, у которых нет метаданных, то есть те, которые не были созданы FileReader или XHR. Если это причина, одним из решений может быть подделка загрузки (XHR) blob как blob, а затем использование URL для нового:

var xhr = new XMLHttpRequest;
xhr.open("get", yourBlobURL);
xhr.responseType = "blob";
xhr.onload = function () {
var yourNewBlob = xhr.response;
audioElement.src = URL.createObjectURL(yourNewBlob)
};
xhr.send();

Если ваши записи короткие, вы также можете использовать URL-адреса данных вместо blob.

И если все, что вы хотите, это услышать, вы также можете переключиться на API веб-аудио.

ответил(а) 2016-09-05T08:41:00+03:00 3 года, 10 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема