Категория: HTML5.
Если вы являетесь новичком в HTML5 то данное руководство именно для вас, в нем вы узнаете как создать свой HTML5 mp3-плеер. И впервой части начнём рассказывать о аудио элементе в HTML5. Элемент HTML5 аудио лежит в основе новых медиа API. Сам элемент позволяет воспроизводить несколько различных типов аудио-файлов и имеет удобный встроенный контроллер, который позволяет пользователю управлять воспроизведением звука. Давайте начнем с создания обычного HTML документа, в котором будет проигрываться файл.
1. HTML
Далее основная структура HTML страницы.
Audio Player
2. Скопируйте mp3 файлы в туже папку где находиться и основной html документ.
3. Теперь скопируйте данный ниже код между тегами . Заметьте что в место music.mp3, вы должны поменять на имя музыкального файла который в добавили для воспроизведения.
4. Теперь можно протестировать работу плеера, открыв его в браузере. Если ваш плеер отображаться но не работает, это связанно с тем что разные браузеры умеют воспроизводить определённый формат аудио файлов.
| Браузер | Ogg Vorbis | MP3 | WAV |
| Firefox | X | X | |
| Safari | X | X | |
| Chrome | X | X | |
| Internet Explorer | X | X |
Исходя из данной таблицы, если у вас есть MP3 файл и вы попытаетесь воспроизвести его в Firefox, то у вас нечего не получиться. По этому необходимо использовать комбинацию файлов MP3 и Ogg Vorbis или WAV. Для конвертации в различные аудио форматы, вы можете воспользоваться бесплатным онлайн сервисом http://audio.online-convert.com/ru.
Добавим комбинацию файлов, для большего охвата браузеров.