Поскольку 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) {
$(‘
}
});
[/sourcecode]
Учтите, что можно сделать намного больше, чем показано в примере, включая остановку воспроизведения, изменения уровня громкости и так далее.