Всё о теге аудио и его управление с помощью javascript. Часть 1.

Простое применение тега </audio>. Первый вариант это когда путь (src) до музыки в самом теге </audio>, а второй вариант это когда путь (src) до аудиофайла в теге <source/>. Если не применяем собственные кнопки и стили для этого аудио, то нужно обязательно добавить атрибут controls, чтобы сам проигрываетль можно было видеть.

Когда путь (src) внутри тега </audio>
Когда путь (src) внутри тега <source/>

Если мы используем несколько аудиофайлов с разными форматами в одном теге </audio>, то каждому внутреннему тегу <source/> зададим путь до этого формата с атрибутом type в котором опишем каой формат мы используем, всего вариантов: type="audio/mpeg / audio/ogg / audio/waw". Таким образом мы помогаем обзревателю быстрее понять что это за аудиофайл.

Атрибут preload в теге </audio> указывает как загружать аудиофайл. Есть три варианта: none - не загружать файл, metadata - загрузить только служебную информацию (продолжительность видео например) и последний вариант auto - при загрузке страницы, загрузить аудифайл полностью.

Отключаем звук у аудио атрибутом muted.

Автоматическое воспроизведение - это атрибут autoplay в теге </audio>. Добавим этот и предыдущий атрибут, что бы музыка не мешала нам, но было видно что атрибут autoplay работает.

Повторение воспроизведения. За зацикливание отвечает атрибут loop.

Управление тегом <audio/> с помощью javascript. Изменяем атрибуты с помощью кнопок и отслеживаем события плеера методами. Все события и атрибуты для управления тегом <audio/> теже самые что и для <video/>. поэтому не будем много расписывать, а просто закрепим материал.

Отслеживание событий плеера:
Проверяем атрибуты:
Тип подгрузки: метаданые
Панель управления: есть
В данный момент на паузе: нет
На секунде: 0
Автовоспроизведение: отключено
Повторение: отключено
Путь до аудио-трека: audio/Hey Violet – Fuqboi.mp3
Скорость воспроизведения: 1
Отключение звука: есть
Громкость: 1.0

Переключение между аудио когда несколько плееров, то есть несколько тегов </audio>. Данный способ не совсем профессионален, так как грузятся все треки, поэтому могут возниакать паузы во время воспроизведения, когда аудио будет подгружаться. Но будем знать что так тоже можно.

Аудиоплеер. Правильный метод переключения между треками.

Создаём точно такой же как в контакте HTML аудио плеер. Лушче всего использовать аудиоплеер зная ajax, так как треки дожны выводиться с БД, где лучше всего чтоб заранее было извесно продолжительность трека, афтор трека, название трека. Рандомно перетосовать треки с помощью JS не стоит, для этого надо использовать php или ajax.

Все стили CSS для тега <audio/>.

Создаём обьект audio. Обьект нам позволяет создать аудио на лету присвоить путь, проверить продолжительность аудио и даже сохранить трек как файл. Не путать обьект аудио var audio = new Audio(); с тегом <audio/> и с обьектом jQuery $('<audio/>')

Создадим обьект аудио на лету из имеющийся ссылки на файл, вытащим имя файла и узнаем продолжительность этой композиции.
Продолжительность аудио с названием: .. , составляет: 00:00

Подключаем радиостанцию на сайт. Подключаем радио: радиорекорд. (Просто нажми на плей и радио заиграет)

Подключаем сразу несколько радостанций и переключаемся между ними.