Html5 (аудио) на Safari & iOS

Я работаю над веб-приложением, и у меня есть одна проблема совместимости с устройствами Apple и Safari на ПК.

Тег html5:

<audio controls>
<source src="/audio/en/file.mp3" type="audio/mpeg">
<source src="/audio/en/file.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>

Я просто хочу воспроизвести аудиофайл с основными элементами управления.
Предыдущий код отлично работает на устройствах Chrome, Opera, Firefox (Windows и Android).
Но контроллеры не отображаются с Safari (протестированы с последней версией на ПК, iPad и iPad mini).
Аудиоплеер имеет серый фон с функцией только для воспроизведения/паузы.
Вот скриншот, описывающий мою проблему:

Спасибо.

Ответ 1

У меня была точно такая же проблема.

Мое решение: я добавил полный URL-адрес источника аудиофайла. Не знаю почему, но это имеет значение. Вот мой полный код. Изменения CSS только для того, чтобы скрыть кнопку загрузки. Но когда я это вынимаю, я не вижу временной шкалы. Очень странно, но именно этот код работает для меня.

<!DOCTYPE html>
<html>
<head>
    <title>html5 audio player on iPhone</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
audio::-internal-media-controls-download-button {
    display:none;
}
audio::-webkit-media-controls-enclosure {
    overflow:hidden;
}
audio::-webkit-media-controls-panel {
    width: calc(100% + 33px);
}  
</style>
</head>
<body>
<audio controls preload="auto" style="width:100%;">
    <source src="https://example.com/audio/audiofile.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio><br />
</body>
</html>

Ответ 2

Это может показаться странным, но убедитесь, что на вашей странице HTML есть первая строка.

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>My Page Title</title>
... and the rest of your page code follows...

Safari, как известно, не отображает содержимое HTML-5 без надлежащего DOCTYPE.

Дополнительная информация: http://www.wimpyplayer.com/docs/common/doctype.html

Ответ 3

Слишком долго искал этот простой ответ после того, как он работал на Andriod, и я наконец проверил на iOS, это работает, если вы используете ionic

import {normalizeURL} from 'ionic-angular';

MediaSource = document.createElement("audio");
MediaSource.src = normalizeURL(cordova.file.dataDirectory + file.fullPath);

Надеюсь это поможет.