Скрипты

ticket-plus-система-технической-поддержки-клиентов  - позволяет вам легко масштабировать и оптимизировать обслуживание клиентов и значительно улучшать положительное отношение ваших клиенов. Ticket...
phpsound-1-2-7-платформа-обмена-музыкойPhpSound - это социальная платформа обмена музыкальными файлами, похожей на soundcloud. Сервис даёт пользователям возмоность загружать свою музыку, и...
wowonder-v-1-3-социальная-сетевая-платформа WoWonder - это PHP-скрипт социальной сети, WoWonder это лучший способ чтобы начать создание собственного сайта социальной сети. Этот скрипт имеет все...

Для Photoshop

animation-glitch-photoshop-action Action для программы Photoshop, который генерирует видео ряд анимационных эффектов в виде помех на экране, из ваших изображений. Вы можете создать...
radiant-action-photoshop Экшен для программы Photoshop, создаёт эффект света и геометрических фигур, что поможет создать стильный модный вид вашему образу. Создавайте яркие и...
doomsday-action-экшен-для-photoshop Экшен для программы Photoshop, создаёт потрясающий эффект драматизма с глубокими тенями и световым контрактом. Отлично подойдёт при создании рекламных...

MP3-плеер с HTML 5

MP3-плеер с HTML 5

Если вы являетесь новичком в HTML5 то данное руководство именно для вас, в нем вы узнаете как создать свой HTML5 mp3-плеер. И впервой части начнём рассказывать о аудио элементе в HTML5. Элемент HTML5 аудио лежит в основе новых медиа API. Сам элемент позволяет воспроизводить несколько различных типов аудио-файлов и имеет удобный встроенный контроллер, который позволяет пользователю управлять воспроизведением звука. Давайте начнем с создания обычного HTML документа, в котором будет проигрываться файл.

 1. HTML

Далее основная структура HTML страницы.

<!DOCTYPE html>
<html>
<head>
	<title>Audio Player</title>
</head>
<body>
</body>
</html>

2. Скопируйте mp3 файлы в туже папку где находиться и основной html документ.

3. Теперь скопируйте данный ниже код между тегами <body> </body>. Заметьте что в место music.mp3, вы должны поменять на имя музыкального файла который в добавили для воспроизведения.

<audio controls="controls">
	<source src="/music.mp3" type="audio/mpeg">
</audio>

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.

Добавим комбинацию файлов, для большего охвата браузеров.

 

<audio controls="controls">
	<source src="/music.mp3" type="audio/mpeg">
	<source src="/music.ogg" type="audio/ogg">
</audio>

 


  1. Комментарии (0)

  2. Add Yours

Комментарии (0)

There are no comments posted here yet

Оставьте свой комментарий

Posting comment as a guest. Sign up or login to your account.
Вложения (0 / 3)
Share Your Location

Векторная графика

плашки-для-рекламных-текстов Набор ярких плашек для рекламных текстов в векторном формате, которые значительно выделят ваш текст на общем фоне. Формат файлов: AI / EPS /...
start-up-rockets-–-ракеты-в-векторе Набор векторных изображений, разного вида летящих ракет. Можно использовать при создании анимации и рекламных баннеров. Формат файлов:...
pop-art-man-векторные-мужчин-в-стиле-поп-арт Набор изображений в векторном формате, яркие иллюстрации мужчин в модном стиле поп арт, отлично подойдёт при создании рекламных баннеров. Формат...

Растовая графика

атлетика-и-бодибилдинг-–-фото-клипарт Набор из 32 изображений высокого качества на тему атлетики и бодибилдинга. Отлично подойдут для рекламных флаеров, баннеров и слайдеров на сайтах...
интернет-технологии,компьютер,гаджеты-–-фото-клипарт Набор из 25 изображений высокого качества, различные интернет технологии, компьютеры, гаджеты. Отлично подойдет для слайд-шоу. Размер 4800 на 3200 px....
бизнес-леди-–-набор-фото-клипарта Набор из 15 изображений высокого качества с красивой блондинкой, бизнес-леди. Эти изображения отлично подойдут для использования в презентациях,...