Latest web development tutorials
×

HTML курс

HTML курс HTML Краткое введение HTML редактор HTML Фонд HTML элемент HTML свойство HTML заголовок HTML пункт HTML Форматирование текста HTML ссылка HTML руководитель HTML CSS HTML изображение HTML таблица HTML список HTML блок HTML раскладка HTML форма HTML рамка HTML цвет HTML название цвета HTML значения цвета HTML скрипт HTML символьные объекты HTML URL HTML Быстрый список HTML резюме XHTML Введение

HTML5

HTML5 курс HTML5 Поддержка браузеров HTML5 Новый элемент HTML5 Canvas HTML5 Инлайн SVG HTML5 MathML HTML5 Перетаскивание HTML5 Географическое положение HTML5 видео(Video) HTML5 аудиочастота(Audio) HTML5 Input тип HTML5 элементы формы HTML5 Свойства формы HTML5 Смысловые элементы HTML5 Web память HTML5 Web SQL HTML5 кэш приложений HTML5 Web Workers HTML5 SSE HTML5 WebSocket HTML5 викторина HTML(5)Спецификация Код

HTML средства массовой информации

HTML средства массовой информации(Media) HTML Виджет HTML аудиочастота(Audio) HTML видеоплеер(Videos) HTML примеров

HTML справочное руководство

HTML список Теги(в алфавитном порядке) HTML список Теги(функция сортировки) HTML свойство HTML событие HTML холст HTML аудиочастота/видео HTML эффективный DOCTYPES HTML название цвета HTML Выбор цвета HTML Набор символов HTML ASCII HTML ISO-8859-1 HTML символ HTML URL кодирование HTML таблица условных сигналов HTTP новости HTTP способ Сочетания клавиш

HTML аудио (Аудио)

Звук в HTML может играть по-разному.


Проблемы и решения

Воспроизведение аудио в формате HTML не так просто!

Вам нужно много знакомых советов, чтобы убедиться, что ваши аудио файлы во всех браузерах (Internet Explorer, Chrome, Firefox, Safari, Opera), и все оборудование (PC, Mac, Ipad, iPhone) могут быть воспроизведены.

В этой главе вы W3CSchool суммировать проблемы и решения.


Использование плагина

Браузер плагин является расширением стандартного браузера есть небольшой компьютерной программы.

Плагины могут использовать <объект> тег или тег <код вставки> добавляется к странице.

Эти метки определяют ресурс (как правило, без HTML ресурсов) контейнера, в зависимости от типа, они будут отображаться в браузере, который также отображается с помощью внешних плагинов.


Используя элемент <встраивать>

<Вставить> тэг определяет внешний (не HTML) содержимого контейнера. (Это HTML5 теги в HTML4 является незаконным, но все браузеры действительны).

Следующий фрагмент кода может отображать MP3-файл, встроенный в веб-страницы:

примеров

<embed height="50" width="100" src="horse.mp3">

Попробуйте »

Проблема:

  • <Вставить> тег в HTML 4 является недействительным. Страница не может быть проверена с помощью HTML 4.
  • Различные браузеры поддерживают различные аудио форматы для.
  • Если ваш браузер не поддерживает формат файла, нет плагинов, то вы не можете не воспроизводить аудио.
  • Если компьютер пользователя не установлен плагин, вы не можете воспроизводить звук.
  • Если файл преобразуется в другие форматы, до сих пор не могут играть во всех браузерах.

Используйте элемент <объект>

<Тег Object> тег также может быть определен вне контейнера (не HTML) контента.

Следующий фрагмент кода может отображать MP3-файл, встроенный в веб-страницы:

примеров

<object height="50" width="100" data="horse.mp3"></object>

Попробуйте »

Проблема:

  • Различные браузеры поддерживают различные аудио форматы для.
  • Если ваш браузер не поддерживает формат файла, нет плагинов, то вы не можете не воспроизводить аудио.
  • Если компьютер пользователя не установлен плагин, вы не можете воспроизводить звук.
  • Если файл преобразуется в другие форматы, до сих пор не могут играть во всех браузерах.

Используйте элемент HTML5 <аудио>

HTML5 <аудио> элемент является элементом HTML5 в HTML 4 является незаконным, но и во всех браузерах действительны.

Элемент <аудио> работает во всех современных браузерах.

Ниже мы будем использовать тег <аудио> для описания файлов MP3 (Internet Explorer, Chrome и Safari эффективен), также добавил типы OGG файлов (Firefox и Opera браузеры эффективно). Если это не удается, он выводит сообщение об ошибке текст:

примеров

<audio controls>
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
Your browser does not support this audio format.
</audio>

Попробуйте »

Проблема:

  • Тег <Audio> в HTML 4 является недействительным. Ваша страница не может быть проверена с помощью HTML 4.
  • Вы должны конвертировать аудио файлы в различные форматы.
  • Элемент <Audio> не работает в старых браузерах.

Лучший HTML Решение

В следующем примере используются два различных аудио-форматов. HTML5 <аудио> элемент пытается играть OGG в MP3 или аудио. Если это не удается, то код будет пытаться откатить <код вставки> элемент.

примеров

<audio controls height="100" width="100">
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
<embed height="50" width="100" src="horse.mp3">
</audio>

Попробуйте »

Проблема:

  • Вы должны быть преобразованы в другой звуковой формат.
  • <Вставить> элемент не может быть откат, чтобы отобразить сообщение об ошибке.

Yahoo Media Player - простой способ добавить аудио на вашем сайте

Игрок с помощью Yahoo является бесплатным. Чтобы использовать его, вам нужно поместить этот JavaScript в нижней части страницы:

Yahoo плеер может воспроизводить MP3 и различные другие форматы. Вам нужно всего лишь добавить одну строку кода на вашу страницу или блог, вы можете легко сделать вашу страницу HTML в профессиональный плейлист:

примеров

<a href="horse.mp3">Play Sound</a>

<script src="http://mediaplayer.yahoo.com/latest"></script>

Попробуйте »

Если вы хотите использовать его, вам нужно поместить этот JavaScript в нижней части страницы:

<script src="http://mediaplayer.yahoo.com/latest"></script>

Затем просто поставить ссылку на MP3-файлов в HTML, JavaScript автоматически создает кнопку воспроизведения для каждой песни:

<a href="song1.mp3"> Play Song 1 </a>
<a href="song2.wav"> Play Song 2 </a>
...
...

Yahoo медиа-плеер для пользователей это небольшая кнопка воспроизведения, а не полный игрок. Тем не менее, при нажатии на эту кнопку появится полный плеер.

Обратите внимание, что этот игрок всегда пристыкован в нижней части оконной рамы. Просто нажмите на него, вы можете двигать его.


Использование гиперссылок

Если страница содержит гиперссылку, указывающую на медиа-файлов, большинство браузеров будет использовать "вспомогательное приложение", чтобы воспроизвести файл.

Следующий фрагмент кода показывает ссылки на mp3 файлы. Если пользователь нажимает на ссылку, браузер запустит "вспомогательное приложение", чтобы воспроизвести файл:

примеров

<a href="horse.mp3">Play the sound</a>

Попробуйте »


Описание встроенного звука

Когда вы включаете звук в веб-страницы, или как часть веб-страницы, это называется встроенный звук.

Если вы планируете использовать встроенные звуки в вашем веб-приложений, вы должны понимать, что многие люди считают, встроенный звук раздражает. Также обратите внимание, что пользователи могут закрыли свой вариант браузера встроенного звука.

Наш лучший совет только тогда, когда пользователь хочет услышать звук инлайн места их содержат. Положительным примером является то, что, когда пользователь должен услышать запись и нажмите на ссылку откроется страница и воспроизведения записи.


HTML теги мультимедиа

Новое: HTML5 новый лейбл

标签 描述
<embed> 定义内嵌对象。HTML4 中不赞成,HTML5 中允许。
<object> 定义内嵌对象。
<param> 定义对象的参数。
<audio> New 定义了声音内容
<video> New 定义一个视频或者影片
<source> New 定义了media元素的多媒体资源(<video> 和 <audio>)
<track> New 规定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>)