Почему записанный через компьютер аудиофайл не работает на айфонах?

Question

[nikita2585]

Не получается вывести на айфон аудиофайл записанный на компьютер.
Сценарий работы: mediaRecorder (JS) записывает звук микрофона пользователя → отправляет POST запрос на сервер → PHP записывает файл и возвращает ссылку
Формат записи: mp3
Проблема: При записи звука с айфона - он воспроизводится на всех устройствах.
При записи с компьютера (windows/браузер не имеет значения) - звук воспроизводится только на других компьютерах. На айфонах - не воспроизводится (ни в каком из браузеров).

<audio controls>
         <source src="https://..." type="audio/mp3">
 </audio>

Пробовал и с SCR, пробовал разные форматы (wav).. итог - всегда один - если записываем через айфон - запись есть везде, если через комп - только на компьютерах...

Comments

[Вадим]

кодек?

[nikita2585]

Вадим, mp3

[Вадим]

nikita2585, А, не, с mp3 ок должно быть

[nikita2585]

Вадим, да :( в этом и проблема...
С айфона записывается для всех устройств, а с компьютера (пробовал на нескольких) - только для windows...

[Вадим]

nikita2585, Ну всё же попробуйте указать полностью как это рекомендуется:
<source src="myAudio.mp3" type="audio/mpeg">

[nikita2585]

Вадим, тоже самое((
вот так отображает

mediaRecorder вроде верно настроен

[Kovalsky]

На вашем месте я бы убедился что используется последняя версия библиотеки, заглянул бы в issues репозитория, потом посмотрел бы аналогичные библиотеки. Если вы её нашли случайно, то велик шанс того что она совсем не топовая, и есть варианты получше

[nikita2585]

Kovalsky, не очень понял, где найти репозиторий)
https://github.com/Krivodanov/Voice-comments - за основу брал этот проект там вроде все файлы на сервере хранятся

[rPman]

А глазками на итоговый файл посмотреть? натравить на него утилиту file и ffmpeg, смотреть что он покажет, а то мало ли может вы aac кодеком кодируете, а имя файла называете mp3.

[nikita2585]

rPman, отправить то, что в итоге записывается с компьютера и с телефона, да? (аудиофайл)

[Kovalsky]

nikita2585, нет, это вам надо самому сделать с помощью ffmpeg

[nikita2585]

rPman, да, проблема действительно в этом
То, что записывает айфон:


То, что записывает компьютер:


Только я не пойму... почему так происходит? Ведь JS код один выполняется...
Как это можно исправить? :((

[Kovalsky]

nikita2585, на вопрос не отвечу, но мб вам помогут другие примеры:

https://mdn.github.io/web-dictaphone/
https://github.com/zhuker/lamejs

[nikita2585]

Kovalsky, через lamejs пытаюсь преобразовать в mp3, но в результате PHP возвращает пустую строку

Скорее всего какие-то переменные ввожу неверно?

mediaRecorder.addEventListener("stop", function () {
                                        const audioBlob = new Blob(audioChunks, {type : 'audio/mp3' });
                                        let fd = new FormData();
                                        fd.append('voice', audioBlob);
                                        sendVoice(fd);
                                        audioChunks = [];
                                    });

async function sendVoice(form) {
                            var mp3Data = [];

                            var mp3encoder = new lamejs.Mp3Encoder(1, 44100, 128); //mono 44.1khz encode to 128kbps
                            var samples = form; //one second of silence replace that with your own samples
                            var mp3Tmp = mp3encoder.encodeBuffer(samples); //encode mp3

                            //Push encode buffer to mp3Data variable
                            mp3Data.push(mp3Tmp);

                            // Get end part of mp3
                            mp3Tmp = mp3encoder.flush();

                            // Write last data to the output data, too
                            // mp3Data contains now the complete mp3Data
                            mp3r = mp3Data.push(mp3Tmp);

                            let promise = await fetch(URLaudio<?=$q_idSave?>, {
                                method: 'POST',
                                body: mp3r});
//... ненужный код

[nikita2585]

Kovalsky, я думаю, что скорее всего либо samples не так передаю, может нужен какой-то особый формат тоже? Или наоборот в POST нужно не mp3r отправлять, а что-то другое

[iRedds]

nikita2585, посмотрите https://github.com/zhuker/lamejs#real-example получение Blob.
var blob = new Blob(mp3Data, {type: 'audio/mp3'});
А тот уже можно через FormData передать на сервер.

Answer 1

[Yourko]

Я решил проблему с помощью Freemake Video Converter .
Его можно скачать в сети.
С его помощью следует преобразовать исходный файл
аудио или видео совместимый с iPhone форматом.

Свое видео я сделал для iPhone-3G, проверяю
работу сайта - всё работает.