English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Звук может быть воспроизведен в HTML несколькими способами.
Воспроизведение аудио в HTML не так просто!
Вам нужно быть хорошо знакомым с множеством навыков, чтобы убедиться, что ваши аудиофайлы могут быть воспроизведены на всех браузерах (Internet Explorer, Chrome, Firefox, Safari, Opera) и всех аппаратных устройствах (PC, Mac, iPad, iPhone).
В этой главе базовый учебник summarizes вопросы и методы их решения.
Браузерные плагины - это kleine Computerprogramme, которые расширяют стандартные функции браузера.
Плагины могут быть добавлены на страницу с помощью тега <object> или тега <embed>.
Эти теги определяют контейнер для ресурсов (обычно не HTML-ресурсы), в зависимости от типа, они могут быть отображены браузером или внешним плагином.
Тег <embed> определяет контейнер для внешнего (не HTML) содержимого. (Это элемент HTML5, который в HTML4 является недопустимым, но работает во всех браузерах).
Ниже приведен фрагмент кода, который может отображать嵌入енный в веб-страницу файл MP3:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Основной учебник (oldtoolbag.com)</title> </head> <body> <object height="50" width="100" data="/run/html/horse.mp3"></object> <p>Если вы не можете услышать аудио, возможно, ваш компьютер или браузер не поддерживают формат файла.</p> <p>Или вы не открыли динамик.</p> </body> </html>Тест на <‹/›
Тег <embed> в HTML 4 неэффективен. Страница не может быть проверена по HTML 4.
Разные браузеры поддерживают различные форматы аудио.
Если браузер не поддерживает формат файла, без плагина аудио не может быть воспроизведено.
Если на компьютере пользователя не установлено плагин, аудио не может быть воспроизведено.
Если файл будет конвертирован в другой формат, он все равно не будет воспроизводиться во всех браузерах.
Тег <object> также может определять контейнер для внешнего (не HTML) содержимого.
Ниже приведен фрагмент кода, который может отображать嵌入енный в веб-страницу файл MP3:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Основной учебник (oldtoolbag.com)</title> </head> <body> <object height="50" width="100" data="/run/html/horse.mp3"></object> <p>Если вы не можете услышать аудио, возможно, ваш компьютер или браузер не поддерживают формат файла.</p> <p>Или вы не открыли динамик.</p> </body> </html>Тест на <‹/›
Разные браузеры поддерживают различные форматы аудио.
Если браузер не поддерживает формат файла, без плагина аудио не может быть воспроизведено.
Если на компьютере пользователя не установлено плагин, аудио не может быть воспроизведено.
Если файл будет конвертирован в другой формат, он все равно не будет воспроизводиться во всех браузерах.
Элемент <audio> HTML5 является элементом HTML5, который в HTML 4 является недопустимым, но работает во всех браузерах.
Элемент <audio> работает во всех современных браузерах.
Совместимость браузеровцифры в графе означают номер первой версии браузера, поддерживающего этот атрибут.
| элемент | Chrome | IE | Firefox | Safari | Opera |
| <audio> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
Ниже мы будем использовать тег <audio>, чтобы описать файл MP3 (доступен в Internet Explorer, Chrome и Safari), а также добавить файл типа OGG (доступен в браузерах Firefox и Opera). Если это не удается, он будет показывать текст ошибки:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Основной учебник (oldtoolbag.com)</title> </head> <body> <audio controls> <source src="/run/html/horse.mp3" type="audio/mpeg"> <source src="/run/html/horse.ogg" type="audio/ogg"> Ваш браузер не поддерживает этот формат аудио. </audio> </body> </html>Тест на <‹/›
Тег <audio> в HTML 4 неэффективен. Ваша страница не может быть проверена по HTML 4.
Вам нужно конвертировать аудиофайл в другой формат.
Элемент <audio> не работает в старых браузерах.
Пример, приведенный ниже, использует два разных формата аудио. Элемент <audio> HTML5 пытается воспроизвести аудио в формате mp3 или ogg. Если это не удается, код пытается использовать элемент <embed>.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Основной учебник (oldtoolbag.com)</title> </head> <body> <audio controls> <source src="/run/html/horse.mp3" type="audio/mpeg"> <source src="/run/html/horse.ogg" type="audio/ogg"> <embed height="50" width="100" src="/run/html/horse.mp3"> </audio> </body> </html>Тест на <‹/›
Вам нужно будет преобразовать аудио в другой формат.
Элемент <embed> не может отображать сообщения об ошибках.
Если веб-страница содержит ссылки на медиафайлы, большинство браузеров будут использовать "дополнительное приложение" для воспроизведения файла.
Следующий фрагмент кода показывает ссылку на файл mp3. Если пользователь нажмет на эту ссылку, браузер запустит "дополнительное приложение" для воспроизведения файла:
<a href="/run/html/horse.mp3">Слушайте звук</a>Тест на <‹/›
Когда вы включаете звук в веб-странице или он является частью веб-страницы, это называется встроенным звуком.
Если вы планируете использовать встроенный звук в web-приложении, вы должны знать, что многие люди считают встроенный звук раздражающим. Также обратите внимание, что пользователь может уже отключить опцию встроенного звука в браузере.
Наши是最好的 советы - включайте их только в тех местах, где пользователь хочет слышать встроенный звук. Пример: если пользователь хочет послушать запись и кликнуть по ссылке, страница откроется, и запись начнется автоматически.
Новый: Тег HTML5
| Тег | Описание |
| <embed> | Определяет встроенный объект. В HTML4 не рекомендуется, но разрешается в HTML5. |
| <object> | Определяет встроенный объект. |
| <param> | Определяет параметры объекта. |
| <audio>HTML5 | Определяет аудиоконтент |
| <video>HTML5 | Определяет видео или фильм |
| <source>HTML5 | Определяет multimedia ресурсы элементов media (<video> и <audio>) |
| <track>HTML5 | Указать файл субтитров или другой файл, содержащий текст, для элемента media (<video> и <audio>) |