Элемент audio языка HTML 5

Поскольку Firefox 3.5, Chrome 3, Opera 10.5 и Safari 4 уже поддерживают многие нововведения HTML 5, такие как поддержка аудио без участия Flash-технологии, мы бы хотели подробнее остановиться на этом моменте. Вы увидите, что всё что нам нужно сделать — создать элемент <audio> и написать несколько атрибутов. В представленном ниже видео, мы рассмотрим необходимую разметку, а так же быстрый способ воспроизводить звуковой файл с помощью jQuery.

Элемент Audio

[sourcecode language=»html»]

[/sourcecode]

Ввиду того что Mozilla и Webkit работают с разными форматами аудио, приходится создавать файл двух разных типов: .mp3 и .ogg.
Когда страница загружается в Safari, браузер не может распознать формат .ogg, поэтому пропускает его и переключается на .mp3. Учтите, что IE, пока не поддерживает всё описанное, а Опера 10 и ниже умеет работать только с .wav файлами.

Атрибуты элемента:

autoplay: Начинает воспроизведение файла после загрузки страницы

controls: Отображает элементы плеера на странице

preload:  Буфферизация файла (значения = none, auto, metadata)

src: Путь к файлу аудио. Лучше всего загружать файл через вложенный элемент source.

Загрузка аудио с помощью jQuery

[sourcecode language=»javascript»]
// Немного модицифированная видео-версия
$(document).ready(function() {
// Создаём элемент аудио, устанавливаем автовоспроизведение
// показываем плеер (элементы управления)
var audio = $(‘

// Вызываем функцию addSource
// добавляем пути к аудиофайлам
addSource(audio, ‘audioFile.ogg’);
addSource(audio, ‘audioFile.mp3’);

// Описываем событие
$(‘a’).click(function() {
// Добавляем элемент audio страницу.
audio.appendTo(‘body’);
// Описывает поведение типа Fadeout для ссылки после нажатия на неё
$(this).fadeOut(‘slow’);
return false;
});

// Добавляем элемент source к элементу audio
function addSource(elem, path) {
$(‘‘).attr(‘src’, path).appendTo(elem);
}
});
[/sourcecode]

Учтите, что можно сделать намного больше, чем показано в примере, включая остановку воспроизведения, изменения уровня громкости и так далее.

Посмотреть пример

Источник