Во время Double Eleven я работал над мобильным интерактивным проектом и столкнулся с функцией переключения на выбор воспроизведения звука в средах App, WeChat и страницы H5.Во время теста было много проблем с совместимостью.Есть много полезных знаний исследования, сегодня мы рассмотрим этот HTML5-Audio.
Тег Audio используется для определения звуков, таких как музыка или другие аудиопотоки, а тег Audio HTML5 в значительной степени заменил Flash для воспроизведения музыки.
Во-первых, стиль по умолчанию
Стиль тега Audio по умолчанию в браузере показан на рисунке ниже.Одна вещь, на которую следует обратить внимание: необходимо настроитьcontrolsАтрибут (отображать ли панель управления по умолчанию, которая является атрибутом управления тега Audio), в противном случае эффект стиля не будет отображаться.
2. Форматы аудиофайлов, поддерживаемые Audio
1. ОГГ:
OGG — это новый формат сжатия звука, похожий на музыкальные форматы, такие как MP3. OGG полностью бесплатен, открыт и не имеет патентов. Формат файла OGG можно постоянно улучшать по размеру и качеству звука, не затрагивая устаревшие кодировщики или проигрыватели.
2. MP3:
MP3 — это технология сжатия звука, ее полное название — MovingPictureExpertsGroupAudioLayerIII (Motion Picture Experts Compression Standard Audio Layer 3), сокращенно MP3. Он предназначен для резкого сокращения объема аудиоданных. Сжимает музыку в формате 1:10 или даже 1:12 в файл меньшего размера, и для большинства пользователей качество воспроизведения существенно не ухудшается по сравнению с исходным несжатым звуком.
3. WAV:
WAV — это формат звуковых файлов, разработанный Microsoft. Он используется для сохранения аудиоинформационных ресурсов платформы Windows. Он широко поддерживается платформой Windows и ее приложениями. Стандартный формат файла WAV совпадает с форматом CD, поэтому качество звукового файла высокое, примерно такое же, как у компакт-диска.
3. Проблемы совместимости
Давайте посмотрим на проблемы совместимости со следующих точек зрения:
1. Совместимость аудиоформатов
| аудио формат | Chrome | Firefox | IE9 | Opera | Safari |
|---|---|---|---|---|---|
| OGG | служба поддержки | служба поддержки | служба поддержки | служба поддержки | не поддерживается |
| MP3 | служба поддержки | не поддерживается | служба поддержки | не поддерживается | служба поддержки |
| WAV | не поддерживается | служба поддержки | не поддерживается | служба поддержки | не поддерживается |
проиллюстрировать:
Основные форматы аудиофайлов, поддерживаемые тегом Audio по умолчанию, — это MP3, WAV и OGG.Разные браузеры по-разному поддерживают эти три формата. Среди них формат MP3 поддерживает лучше всего.
Формат WAV имеет лучшее качество звука, но размер файла больше. MP3 имеет более высокую степень сжатия, более высокую скорость проникновения и худшее качество звука, чем WAV. OGG и MP3 закодированы с одинаковым битрейтом (Bit Rate), OGG меньше, и OGG бесплатен без выплаты лицензионных отчислений (это очень популярно у китайцев).
2. Совместимость различных браузеров для аудио тегов HTML5
проиллюстрировать:
Аудиотеги могут поддерживаться в браузерах более новых версий, а совместимость на мобильных терминалах будет лучше.
4. Как использовать
Свойства, методы и события, которые мы часто используем:
1. Общие атрибуты:
| Атрибуты | значение атрибута | Примечания |
|---|---|---|
| src | url |
URL-адрес воспроизводимой музыки (Firefox поддерживает только музыку в формате OGG, а IE9 поддерживает только музыку в формате MP3. Кажется, Chrome поддерживает все это) |
| preload | preload |
Предварительная загрузка (загрузка или буферизация звука при загрузке страницы), это свойство не действует, если используется автовоспроизведение. |
| loop | loop | Петля |
| controls | controls |
Показывать ли панель управления по умолчанию (кнопки управления) |
| autoplay | autoplay | Автовоспроизведение |
2. Общие методы:
| функция | эффект |
|---|---|
| load() | Загрузите аудио и видео программное обеспечение |
| play() | Загружать и воспроизводить аудио/видеофайлы или воспроизводить приостановленное аудио/видео |
| pause() | Приостановить воспроизводимое в данный момент аудио |
3. Общие события:
| название события | Эффект события |
|---|---|
| play | играть и автовоспроизведение во время игры |
| pause | Когда срабатывает метод паузы |
| ended | Конец текущей игры |
| timeupdate | Когда текущее время воспроизведения изменяется (обработка времени обычно используется при воспроизведении) |
| canplaythrough | Песня загружена полностью |
| canplay | Буферизируется до текущего игрового состояния. |
Мы можем управлять воспроизведением через JS-код:
let audio = document.getElementById('audio');
audio.load();//加载
audio.play();//播放
audio.pause();//暂停
audio.loop = true;//循环播放
скопировать код5. Проблемы и решения:
Хорошо, давайте подробно рассмотрим совместимость тега Audio:
1. Как решить проблему с предзагрузкой
Статус: предварительная загрузка не поддерживается в Safari и WeChat на iOS.
Решение:Требовать от пользователя активного запуска события (Event)играть.
Образец кода:
$("#btn").click(function(){
$("#audio").load();
})
скопировать код2. Как решить проблему переключения нескольких аудиофайлов
Статус: На тот момент в проекте было переключение между разными музыкальными проигрывателями.Если изменить src тега Audio, возникала проблема, что музыка не проигрывалась или задержка воспроизведения была слишком велика под iOS.
Решение: причина этой ошибки в том, что аудиофайлы не могут кэшироваться в системе iOS. Всякий раз, когда страница обращается к другим аудиофайлам, доступ к аудиофайлам осуществляется из сети. Решение: это можно сделать на страницеОбъявить несколько аудиоПометьте, импортируйте аудиофайлы, которые необходимо импортировать заранее, и вызовите соответствующий файл, после которого воспроизводится один. Недостатком этого решения является то, что каждый аудио занимает поток в системе iOS. Если есть несколько аудио, он будет занимают много ресурсов; аудиофайлобъединить в один файл, при воспроизведении других аудио вам нужно только вызвать соответствующий период объединенного аудиофайла.Хотя это громоздко, совместимость очень хорошая.Вы можете обратиться к инструменту слияния аудио (http://jsfiddle.net/aarongloege/ rQv5h/свет/ ).
Образец кода:
<audio src="" id="audio1"></audio>
<audio src="" id="audio2"></audio>
var audio1 = document.getElementById('audio1');
var audio2 = document.getElementById('audio2');
audio1.play();
audio2.play();
скопировать код3. Как решить проблему автозапуска
Статус: браузеры Safari на iOS или некоторые браузеры телефонов Android не поддерживают атрибут автозапуска.
Решение: ещеПомогите пользователю вручную запустить операцию воспроизведения.
Например, привяжите событие touchstart для выполнения операции audio.play(), поэтому вам необходимо подтвердить этот момент при общении с продуктом и тестирующими учениками. Если в среде WeChat вы можетеВызов плагина, предоставленного WeChat(Цзян Вэйсинь-1.0.0. есть).
Образец кода:
wx.ready(function() {
audio.play();
});
скопировать код4. Как решить проблему количества игр
статус-кво:Аудиотег может воспроизводить только один звук..
Решение: если вы хотите воспроизвести несколько аудиозаписей одновременно, вы должны использовать несколько аудиотегов, но в этом случае следует отметить, что каждый браузер поддерживает воспроизведение нескольких аудиозаписей на одной странице, а сцена проекта в основном позволяет только одно аудио для воспроизведения. Обратите внимание на этоЭлементы управления для остановки воспроизведения других музыкальных объектов во время воспроизведения текущей музыки..
Образец кода:
<audio src="a.mp3" src="a.mp3"></audio>
<audio src="b.mp3" src="b.mp3"></audio>
<audio src="c.mp3" src="c.mp3"></audio>
скопировать код5. Как решить проблему микширования и воспроизведения звука на мобильном терминале
Статус: при закрытии окна браузера (переходе в фоновый режим) или переключении вкладок в iOS Safari Audio по-прежнему продолжает воспроизводить аудиофайлы в цикле и прекращает воспроизведение, если вкладка браузера закрыта.
Обходной путь: используйтеВремя хранения циклачтобы проверить, находится ли пользователь на странице,timeupdateСобытие запускается при изменении позиции воспроизведения звука.
Образец кода:
var lastSeen;
var loop = function (){
lastSeen = Date.now();
setTimeout(loop, 50);
};
loop();
var music = document.getElementById('music');
music.addEventListener('timeupdate', function (){
if(Date.now() - lastSeen > 100){
this.pause();
}
}, false);
скопировать код6. Как решить проблему повтора
Статус: когда воспроизводится звук на странице JDApp, переключитесь на фон или другие приложения, после того как музыка будет приостановлена, а затем переключитесь на исходную страницу, на которой воспроизводится музыка, музыка не продолжает воспроизводиться.
Решение: определить, находится ли он под JDApp, если он используется в JDAppJDAppUniteВызовите собственный метод callRouterModuleWithParams, чтобы управлять звуком для продолжения воспроизведения.
Образец кода:
function toOriginalChk(wvt, soundRouter){
// 判断环境
if (wvt == 'notJdApp') {
return;
} else if (wvt == 'wk') {
// 通知原生播放状态
window.webkit.messageHandlers.JDAppUnite.postMessage({
'method': 'callRouterModuleWithParams',
'params': JSON.stringify(soundRouter)
});
} else if (wvt == 'ui') {
window.JDAppUnite && window.JDAppUnite.callRouterModuleWithParams(JSON.stringify(soundRouter));
}
}
скопировать код7. Как решить проблему задержки инициализации
Статус: есть задержка в несколько секунд, когда браузер iOS Safari инициирует новый аудиопоток.
Решение: причина этой ошибки в том, что iOS необходимо создать новый аудиообъект, а затем запросить аудиоресурсы по сети.После загрузки аудиоресурсов их можно воспроизвести.Решение: вПосле того, как страница будет готова, загрузите каждый файл, а затем вызовите метод play.Таким образом, аудиоресурсы могут быть предварительно загружены, а сеть может быть запрошена заранее, что может быть оптимизировано для конкретных бизнес-сценариев.
Образец кода:
$(function(){
$("#audio1").load();
$("#audio2").load();
})
скопировать код8. Как решить проблему отключения звука
Статус: в идеале пользователи могут отключать звук, инициируя события на соответствующих страницах.
Обходной путь: звук можно отключить, установив свойство muted, но свойство muted не поддерживается в iOS 8 и более ранних версиях или IE9 и более ранних версиях.
Образец кода:
$("#audio").muted = true
скопировать код9. Как решить проблему с загрузкой
Состояние: если вызов метода воспроизведения, когда загрузка страницы не завершена, завершится ошибкой, в этом случае установка currentTime вызовет ошибку исключения. Не удалось загрузить ресурс: сервер ответил со статусом 404 ().
Решение: Если вы столкнулись с такими проблемами, вы можете сначалаПроверьте размер сети и аудиоисключить.
10. Как решить проблему с воспроизведением петли
Статус: свойства цикла не поддерживаются в iOS до версии 5.
Решение: можно пройтиДобавлен прослушиватель событий для события onEnded.и вызовите метод play в этой функции, чтобы решить эту проблему.
Образец кода:
var audio = document.getElementById('audio');
audio.play();
var onEnded = function() {
this.play();
};
audio.addEventListener('ended', onEnded, false);
скопировать кодНебольшой совет: тег HTML5 Audio дает нам дополнительную информацию, чтобы указать, какой период времени воспроизводить, следуя формату («#») после медиафайла.
<audio src="audio.mp3#t=10,20"></audio>
// src="audio.mp3#t=10,20" （从10s播放到20s）
// src="audio.mp3#t=10" （从10s播放到完）
// src="audio.mp3#t=,10" （从开头播放到10s）
скопировать кодСуммировать
Хотя тег Audio, предоставляемый HTML5, имеет много проблем с совместимостью, Audio по-прежнему является общей тенденцией развития HTML5 при использовании воспроизведения звука на мобильных терминалах, и его стоит использовать. В этой статье рассказывается, как использовать тег Audio, совместимые версии аудиофайлов и проблемы совместимости Audio в различных средах, а также приводятся соответствующие решения. Наконец, прикрепите плагин, разработанный самостоятельно
(https://GitHub.com/BOE2/audio create.is/tree/master/audio JS),
Отсканируйте QR-код, чтобы получить доступ:
Упомянутые выше решения могут помочь вам решить большинство проблем.Если вам нужно лучше избегать этих аудиоям, вы можете обратиться к этому плагину JS.Метод использования следующий:
jdMusic.create([{
src: 'https://jdch5.jd.com/yayoi/res/raw-assets/Sound/A.mp3',
isloop: false,
id: 'demo1',
class: 'demo1',
autoplay: false
}, {
src: 'https://jdch5.jd.com/yayoi/res/raw-assets/Sound/B.mp3',
isloop: false,
id: 'demo2',
class: 'demo2',
autoplay: true
}]);
jdMusic.play(0)
jdMusic.pause()
скопировать кодиспользованная литература
[1] Аудиотег HTML 5
http://www.w3school.com.cn/html5/html5_audio.asp
[2] Аудио объект HTML DOM
http://www.w3school.com.cn/jsref/domobjaudio.asp
[3] Аудио HTML5 (аудио)
http://www.runoob.com/html/html5-audio.html
[4] инструмент звукового спрайта
http://jsfiddle.net/aarongloege/rQv5h/light/
[5] audioCreate.js
https://github.com/jdf2e/audioCreate.js/tree/master/audiojs