Начиная с Firefox 3.5, Chrome 3, Opera 10.5 и Safari 4, мы можем воспользоваться многими новыми функциями HTML 5, включая встроенную поддержку звука, без необходимости использования Flash. Как вы обнаружите, мы только создаем новый элемент <audio> и устанавливаем несколько атрибутов. В этом четырехминутном видеоролике мы рассмотрим разметку, а также быстрый способ воспроизведения звука с помощью jQuery.
Аудио элемент
|
1
2
3
4
|
<audio autoplay=»autoplay» controls=»controls»>
<source src=»file.ogg» />
<source src=»file.mp3″ />
</audio>
|
Элемент audio принимает несколько атрибутов, в частности:
- автозапуск: немедленно воспроизводит файл при загрузке страницы.
- органы управления: отображает плеер на странице.
- предварительная загрузка: немедленно начинает буферизацию файла. (значения = нет, авто, метаданные)
- src: путь к имени файла. Вместо этого лучше загружать файл через дочерний элемент «source».
Mozilla и Webkit пока не совсем ладят, когда дело доходит до аудиоформата. Firefox захочет увидеть файл .ogg, в то время как браузеры Webkit будут отлично работать с обычным расширением .mp3. Это означает, что, по крайней мере, на данный момент, вы должны создать две версии аудио. Я рекомендую вам использовать быстрый и простой онлайн-инструмент Media.io для конвертации mp3 в формат ogg.
Когда Safari загружает страницу, он не распознает этот формат .ogg, пропустит его и перейдет к версии mp3, соответственно. Обратите внимание, что IE, как правило, не поддерживает это, и Opera 10 и ниже может работать только с WAV-файлами.
Загрузка аудио с помощью jQuery
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
// Slightly modified from video version.
$(document).ready(function() {
// Create an audio element, and set it to autoplay,
// and show the player when the page loads.
var audio = $(‘<audio />’, {
autoPlay : ‘autoplay’,
controls : ‘controls’
});
// Call our addSource function, and pass in the audio element
// and the path(s) to your audio.
addSource(audio, ‘audioFile.ogg’);
addSource(audio, ‘audioFile.mp3’);
// When some event is fired…
$(‘a’).click(function() {
// Add the audio + source elements to the page.
audio.appendTo(‘body’);
// Fadeout the anchor tag to keep the user from clicking it again.
$(this).fadeOut(‘slow’);
return false;
});
// Adds a source element, and appends it to the audio element, represented
// by elem.
function addSource(elem, path) {
$(‘<source />’).attr(‘src’, path).appendTo(elem);
}
});
|
Обратите внимание, что с этим мы можем пойти гораздо дальше, в том числе как остановить звук, изменить громкость и т. Д. Этот быстрый трехминутный совет предназначен только для того, чтобы разжечь ваш аппетит. Если вы хотите глубже вникнуть, дайте нам знать, и я запланирую полный тридцатиминутный урок по этой теме!
- Подпишитесь на нас в Твиттере или подпишитесь на ленту Nettuts + RSS для получения лучших учебных материалов по веб-разработке.