Safari со звуковой меткой не работает

Ответ 1

У меня была одна и та же проблема, и я обнаружил, что это связано с следующим ограничением в Safari:

В Safari на iOS (для всех устройств, включая iPad), где пользователь может быть в сотовой сети и заряжен на единицу данных, предварительная загрузка и автовоспроизведение отключены. Данные не загружаются до тех пор, пока пользователь не инициирует его. Это означает, что методы JavaScript play() и load() также неактивны, пока пользователь не начнет воспроизведение, если только не запускается метод play() или load() по действию пользователя. Другими словами, пользовательская кнопка воспроизведения работает, но событие onLoad = "play()" не работает.

Ссылка: http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html

Один из способов решить эту проблему - отключить звук по умолчанию, а когда пользователь "отключит", вы можете создать экземпляр объекта HTML5 Audio и сохранить его в "статическом" / "глобальном" переменном и использовать что для дальнейшего воспроизведения.

- ОБНОВЛЕНИЕ

Вот блогпост, описывающий проблему и способы ее решения: http://blog.gopherwoodstudios.com/2012/07/enabling-html5-audio-playback-on-ios.html

Вот аналогичный вопрос stackoverflow, обсуждающий одно и то же: Автовоспроизведение аудиофайлов на iPad с HTML5

И здесь следует JavaScript-модуль, который я написал для обработки воспроизведения звука в HTML5:

NS.modules.html5.audio = (function () {

    var _snd = false;

    function playAudio(src) {
        if (!_snd)
            _snd = new Audio();
        else
            $(_snd).empty();

        for (var i = 0; i < src.length; i++) {
            var source = document.createElement('source');
            source.type = src[i].type;
            source.src = src[i].src;
            _snd.appendChild(source);
        }

        _snd.load(); // Needed on safari / idevice
        _snd.play();
    };

    var playAudio = function () {
        var src = [
            { src: "/path/to/audio.wav", type: "audio/vnd.wave" },
            { src: "/path/to/audio.ogg", type: "application/ogg; codecs=vorbis" },
            { src: "/path/to/audio.mp3", type: "audio/mpeg" }
        ];
        playAudio(src);
    };

    return {
        playAudio: playAudio,
        // more play functions here
    };
})();

Ответ 2

В моем случае проблема была вызвана из-за формата HTML, я переключился на следующий формат и работал. Надеюсь, это поможет кому-то:

<audio id="audioFrenata" src="sounds/frenata.ogg"></audio>

Обратите внимание на отсутствие элемента <source> в приведенном выше макете.

Ответ 3

Проверьте, поддерживается ли функция HTML5 в браузерах, о которых вы упомянули. Вы можете проверить это здесь. Надеюсь, это поможет вам.

Ответ 4

Идентификатор кажется неправильным.

$('#audioLevel').on('ended', function() {
     manageImageObjectsLevel();
}).get(0).play();

Предположим, что

$('#audioFrenata').on('ended', function() {
     manageImageObjectsLevel();
}).get(0).play();

Используйте ниже HTML

<audio id="audioFrenata"  controls="controls">
    <source src="sounds/frenata.ogg" type="audio/ogg">
    <source src="sounds/frenata.mp3" type="audio/mpeg">
</audio>​

Обратитесь LIVE DEMO