Мастерим аудиоплеер на HTML5

Делаем плеер на сайт boogiemanmusic.ru для проигрывания демонстрационных фрагментов аудиотреков на страничке информации об альбоме. За образец берём реализацию на allmusic.com.

Каждый трек описываем таким фрагментом кода:

<div class="track" data-url="SampleSounds/flute_c_long_01.wav"> <span class="track-title">Short Test Sound</span> <span class="track-info">(WAV sample)</span> <span class="track-time">0:05</span> </div>

Всё остальное докручивается с помощью CSS (в оригинале — LESS) и кодом на JavaScript с jQuery. Хотя, наверное, можно было и на CoffeeScript разнообразия для?

Скриптом добавляем собственно плеер, в который будут загружаться все сэмплы, — один на всех:

<audio id="audio" data-tick="0" preload="auto"> <source src="" /> </audio>

И в каждый трек подсовываем иконку:

<span class="track-icon"> <span class="track-go"></span> </span>

Для отображения позиции в проигрываемом фрагменте используем набор из 20 спрайтов (в '.track-icon'):

Плюс иконки старт/стоп (в '.track-go'):

Не реализовано изменение громкости и переход в произвольную позицию трека, — в стремелении к минимализму.

---