Воспроизведение аудио с помощью html5

В HTML5 появился новый элемент, позволяющий воспроизводить аудио в документах HTML: это элемент<audio>, а характеристики его почти идентичны характеристикам элемента <video>.

<!DOCTYPE html>

<html lang="en">

<head>

<title>Audio Player</title>

</head>

<body>

<section id="player">

<audio src="beach.mp3" controls>

</audio>

</section>

</body>

</html>

Элемент <audio>

Элемент <audio> работает так же, как и и элемент <video>, и у них много общих атрибутов:

src. Задает URL-адрес файла, который будет воспроизводиться на странице. Так же, как и и при использовании элемента <video>, этот атрибут обычно заменяют элементом <source>, для того чтобы перечислить ссылки на несколько файлов в разных аудиоформатах, из которых браузер сможет выбрать наиболее подходящий;

controls. Активирует интерфейс, по умолчанию предоставляемый каждым браузером;

autoplay. Если этот атрибут присутствует. Браузер автоматически начинает воспроизведение audio, как тлько это становится возможным;

loop. Если этот атрибут присутствует, браузер начинает воспроизведение аудио с начала, как только оно достигнет конца;

preload. Может принимать три значения: none, metadate, auto. Назначение их совпадает с описанным для элемента <video>.

Кода из указанного выше примера должно быть более чем достаточно для встраивания аудио, однако это только теоретически. MP3 распространяется с коммерческой лицензией, следовательно, не поддерживается такими браузерами, как Firefox и Opera. Vorbis (аудиокодек из контейнера OGG) поддерживается вышеупомянутыми браузерами, но не Safari и не Internet Explorer. Поэтому снова приходится прибегать к помощи элемента <source> и добавлять ссылки минимум на два файла в разных форматах, из которых браузер сможет выбрать подходящий.

<!DOCTYPE html>

<html lang="en">

<head>

<title>Audio Player</title>

</head>

<body>

<section id="player">

<audio id="media" controls>

<source src="beach.mp3">

<source src="beach.ogg">

</audio>

</section>

</body>

</html>

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

Программирование видеопроигрывателя

API-интерфейс мультимедиа поддерживает как видео, так и аудио. Каждое свойство, событие и метод,добавленные для поддержки видео, работают также и с аудиофайлами. Следовательно, в нашем шаблоне следует заменить только элемент <video> на <audio>, и мы получим готовый аудиопроигрыватель.

<!DOCTYPE html>

<html lang="en">

<head>

<title>Video Player</title>

<link rel="stylesheet" href="player.css">

<script src="player.js"></script>

</head>

<body>

<section id="player">

<audio id="media" width="720" height="400">

<source src="beach.mp3">

<source src="beach.ogg">

</audio>

<nav>

<div id="buttons">

<button type="button" id="play">Play</button>

</div>

<div id="bar">

<div id="progress"></div>

</div>

<div style="clear: both"></div>

</nav>

</section>

</body>

</html>

body{

text-align: center;

}

header, section, footer, aside, nav, article, figure, figcaption, hgroup{

display: block;

}

#player{

width: 720px;

margin: 20px auto;

padding: 5px;

background: #999999;

border: 1px solid #666666;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

}

nav{

margin: 5px 0px;

}

#buttons{

float: left;

width: 85px;

height: 20px;

}

#bar{

position: relative;

float: left;

width: 600px;

height: 16px;

padding: 2px;

border: 1px solid #CCCCCC;

background: #EEEEEE;

}

#progress{

position: absolute;

width: 0px;

height: 16px;

background: rgba(0,0,150,.2);

}

var maxim, mmedia, play, bar, progress, loop;

function initiate(){

maxim = 400;

mmedia = document.getElementById('media');

play = document.getElementById('play');

bar = document.getElementById('bar');

progress = document.getElementById('progress');

play.addEventListener('click', push, false);

bar.addEventListener('click', move, false);

}

function push(){

if(!mmedia.paused && !mmedia.ended) {

mmedia.pause();

play.innerHTML = 'Play';

window.clearInterval(loop);

}else{

mmedia.play();

play.innerHTML = 'Pause';

loop = setInterval(status, 1000);

}

}

function status(){

if(!mmedia.ended){

var size = parseInt(mmedia.currentTime * maxim / mmedia.duration);

progress.style.width = size + 'px';

}else{

progress.style.width = '0px';

play.innerHTML = 'Play';

clearInterval(loop);

}

}

function move(e){

if(!mmedia.paused && !mmedia.ended){

var mouseX = e.pageX - bar.offsetLeft;

var newtime = mouseX * mmedia.duration / maxim;

mmedia.currentTime = newtime;

progress.style.width = mouseX + 'px';

}

}

window.addEventListener('load', initiate, false);