У меня есть файлы MP3 и M4A в тегах <audio>. Файл MP3 отлично воспроизводится в Safari и Chrome, а файл M4A нормально воспроизводится в Chrome, но M4A не воспроизводится в Safari. Я вижу элементы управления звуком в Safari для M4A. Я нажимаю на значок воспроизведения, но ничего не происходит.

Даже для файла MP3, который нормально воспроизводится в Safari, когда я нажимаю на вкладку «Сеть», я вижу «Произошла ошибка при попытке загрузить ресурс». сообщение на вкладке Предварительный просмотр. Я заметил, что в Chrome кодировка передачи возвращается как фрагментированная, но в Safari это идентификация.

Ответ в формате MP3 – Safari:

HTTP/1.1 200 OK
Content-Type: audio/mpeg
Content-Disposition: inline; filename=Audio.mp3
X-XSS-Protection: 1
Transfer-Encoding: Identity
Date: Sat, 04 Apr 2020 00:10:29 GMT
Connection: keep-alive
X-Content-Type-Options: nosniff
Accept-Ranges: bytes
X-Frame-Options: SAMEORIGIN
X-Powered-By: Express
X-RequestID: undefined
X-Permitted-Cross-Domain-Policies: none
Strict-Transport-Security: max-age=3600

Ответ M4A — Сафари:

Response
HTTP/1.1 200 OK
Content-Type: audio/mp4
Content-Disposition: inline; filename=Audio.m4a
X-XSS-Protection: 1
Transfer-Encoding: Identity
Date: Sat, 04 Apr 2020 00:10:29 GMT
Connection: keep-alive
X-Content-Type-Options: nosniff
Accept-Ranges: bytes
X-Frame-Options: SAMEORIGIN
X-Powered-By: Express
X-RequestID: undefined
X-Permitted-Cross-Domain-Policies: none
Strict-Transport-Security: max-age=3600

Ответ M4 — Chrome

Accept-Ranges: bytes
Connection: keep-alive
Content-disposition: inline; filename=Audio.m4a
Content-Type: audio/mp4
Date: Sat, 04 Apr 2020 00:15:02 GMT
Strict-Transport-Security: max-age=3600
Transfer-Encoding: chunked
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
X-Permitted-Cross-Domain-Policies: none
X-Powered-By: Express
X-RequestID: undefined
X-XSS-Protection: 1
0
user994165 4 Апр 2020 в 03:17

1 ответ

Я решил эту проблему, поместив URL-адреса двух источников в аудиотег; тот же URL-адрес с другим способом чтения кодировки:

<audio controls>
    <source src="{.URL}" type="audio/ogg">
    <source src="{.URL}" type="audio/mp4">
</audio>

Сервер, дающий ответ, должен иметь заголовок Accept-Ranges, чтобы передавать файл, разбитый на несколько частей. Вы можете увидеть больше в этом ответе: iPhone/iPad Safari требует заголовка «Accept-Ranges» для видео?

Я надеюсь, что это поможет.

2
Andoni 27 Апр 2020 в 15:08