По слухам грядут тяжелые времена для нас, любителей флеш плееров И я задалась вопросом, Как вставить аудиофайл (музыку) с помощью HTML5 к себе в дневник, в статью, в ближайшем будущем? Почитала...и составила с помощью браузера Chrome версии 7( браузер у меня Яндекс. Браузер) вот такие простые проигрыватели с картинками ( украшать мы любим свои публикации )

Новогодняя

Любимые глаза

Волшебный дудук

Осень придет

Вспомнила все свои поиски в интернете, подумала и решилась создать вот эту статью с цитатами- может кому-то из вас, дорогие, она поможет в решении вопроса о загрузке музыки в будущем в ваш дневник.

Для вставки простого плеера на страницу своего дневника, вернее загрузки аудиофайла, музыки, используется следующий HTML скрипт аудиоплеера:



В результате имеем:

Андрей Картавцев – Новогодняя ночь

Выполняем вставления очень аккуратно, как всегда, и получаем аудиоплеер с картинкой ( все лучше, по-моему, чем "голый " плеер )


Для вставки аудио-плеера без картинки я использовала следующую статью: цитирую дословно и полностью- очень понятно изложено ( со ссылкой!)
Как вставить аудиофайл (музыку) с помощью HTML5
Вот как будет выглядеть готовый код:




Как видите, что тут добавлено сразу 3 файла, таким образом, если какой- то браузер не поддерживает mp3, он автоматически воспроизведёт тот формат, который поддерживает... и так далее...

А если браузер вообще не поддерживает тег аудио, то выскочит вот это сообщение «Ваш браузер не поддерживает аудио».

Но мы же добрые люди :-) И если пользователь не сможет прослушать музыку, мы дадим её ему скачать. Для этого Вам нужно добавить просто ссылки на файлы. Таким образом у нас получится следующий код:



Таким образом вы сможете скачать любой файл :)


Друзья, а вот пример наших трудов.

Сюда я вставляю адрес аудиофайла в MP3, который скачала


Исключите из формулы мои слова " адрес аудиофайла мп3" и " адрес аудиофайла"
Простой проигрыватель браузер подставляет сам.






Результат

Вот и всё, дорогие друзья.
P.S. Простите, друзья, за стиль и содержание, т.к. было трудно записывать теги, которые сразу переводились... Вы разбирались и в более сложных материалах, поэтому, надеюсь, пробьетесь и через мои "дебри"

Серия сообщений "коды для ЛиРу":

Часть 1 - Цветное окошко для кода
Часть 2 - Фоновое изображение в рамке. Часть 1
...
Часть 28 - Плеер с Привет.ру теперь и с Лирушной пропиской!
Часть 29 - Учимся делать кликабельную кнопку для постов "Понравилось"
Часть 30 - Как вставить аудиофайл (музыку) с помощью HTML5