Как добавить аудио или музыку на сайт?
Вы можете использовать сервис SoundCloud (блок T153 из раздела «Другое»), или другой проигрыватель, который можно поставить через html (инструкция Вставка html кода).
В материале Сервисы и виджеты для сайта, вы найдёте примеры сервисов, которые можно использовать:
Пример использования Soundcloud читайте в Справочном центре: Добавление музыки через SoundCloud.
Похожие вопросы
- Как добавить ссылку на конкретное место на странице (якорь)?
- Как добавить кнопку?
- Как добавить свой HTML, CSS или Javascript-код?
- Как сделать всплывающее окно?
- Как добавить видео?
Урок №12: Музыка и звуки в HTML
Иногда возникает необходимость подключить фоновую музыку к HTML странице или же создать проигрыватель со списком воспроизведения. Конечно исключительно с помощью HTML это сделать можно, однако эффективнее будет подключить на сайт флеш-проигрыватель. В данной статье мы постараемся максимально раскрыть связь звуковых файлов с HTML и рассмотрим различные способы, как интегрировать музыку в HTML-код.
Фоновая музыка
Прежде чем устанавливать на сайт(особенно на главную его страницу) фоновую музыку, следует подумать, не будет ли она раздражать посетителей, ведь у каждого из нас свои предпочтения к музыке. Также стоит учитывать, что многие пользователи могут зайти на ваш сайт, слушая свою музыку, им будет не очень приятно слушать одновременно два музыкальных трека. Также у посетителей должен быть установлен веб-плеер (Quick Time, VLC media player), иначе ничего они не услышат. Существует два способа задать фоновую музыку, однако мы рассмотрим только один, т.к второй работает не во всех браузерах и задается в контейнере head, что не всегда удобно. Пример вставки фоновой музыки:
Благодаря этому коду сейчас на сайте играет фоновая музыка. Рассмотрим более детально параметры и значения тега
- autostart – параметр определят будет ли автоматически играть музыка после открытия станицы. При значении true – да, при false – нет.
- loop – параметр определяет будет ли фоновая музыка играть бесконечно или один раз прозвучит и все. При значении true – да, при false – только один раз.
- hidden — определяет наличие панели управления плеера. При значении true – отображается, при false – отсутствует.
- width — задает ширину панели управления проигрывателя (если проигрыватель не отображается, то и задавать не следует)
- height — задает высоту панели управления проигрывателя (если проигрыватель не отображается, то и задавать не следует)
Есть еще один способ задать фоновую музыку, однако качество такой музыки будет намного хуже, так как парный тег , работает с файлами таких форматов — wav, au, midi. Данный тег имеет следующие параметры:
- src — задает url адрес звукового файла с расширением.
- loop — задает количество повторов фоновой музыки, при значении -1, трек будет повторятся бесконечно.
- balance — баланс стерео-звучания ( имеет значения от -10000 до 10000, по умолчанию 0)
- volume — громкость воспроизведения, максимальное значение 0 (возможный диапазон громкости от -10000 до 0)
К использованию фоновой музыки необходимо серьезно подойти и встраивать ее когда это действительно необходимо.
Подключение проигрывателей
И все же намного привлекательнее выглядят флеш-проигрыватели, однако над ними придется потрудиться, займемся этим на других уроках. Также существует возможность включить плеер с других сайтов, только необходимо подобрать свой плейлист. Ниже пример одного из флеш проигрывателей:
В HTML5 существует еще один парный тег , к сожалению он воспроизводит музыку не во всех браузерах, однако браузеры постоянно обновляются и улучшаются, так что это лишь вопрос времени. Если рассматривать Google Chrome, то он предпочтет тег , чем открывать веб-проигрыватели, ведь у него есть свои, встроенные. Opera наоборот, скорее «предпочтет» первый способ, так как mp3 в данном теге не поддерживает. Тег имеет следующие параметры:
- src – задает путь к воспроизводимому файлу
- autoplay – автоматическое воспроизведение файла при открытии страницы
- loop — зацикливает воспроизведения трека.
- control — добавляет панель управления
Пример использования атрибутов данного тега:
Несомненно, музыка — это жизнь, это ключ к любому настроению. Существуют страницы с маленьким контентом, например, страницы подписки на рассылку, регистрации и т.д., именно туда и можно вставить вашу фоновую музыку. А по-поводу проигрывателей, в основном они уместны на музыкальных сайтах и развлекательных порталах. Сейчас все, как правило, слушают музыку со своего плеера, где уже стоит список любимых песен или же онлайн, в социальных сетях, что также очень удобно.
Тег предназначен не только для вставки в HTML-код музыки, однако с появлением тега Тег , благодаря которому можно вставлять большинство мультимедийных объектов, он немного устарел. Более подробно рассмотрим на следующем уроке: Встраивание мультимедийных объектов
Как сделать фоновую музыку в html?
в html сделайте отдельную кнопку с type=»button», добавьте отдельно в код ваш audio-html тег с каким-либо идентификатором (для js). И дальше, через JS, запускайте audio.
И да, уберите autoplay, иначе он будет сам включаться (хотя вроде бы браузеры блокируют такую возможность).
logan baby, прочтите про html5 audio. в onclick запускаете метод, который получает id audio-тега и через js запускай audio.
logan baby @loganbaby Автор вопроса
function soundClick() что то типо того? только не работает
function soundClick() Примерно так. Попробуйте, не проверял
logan baby, И всё таки лучше используйте button вместа input.
UPD: У вас могут быть проблемы с тем, что путь к файлу неверный. Тогда придётся работать с путями.
logan baby @loganbaby Автор вопроса
Дмитрий Кузнецов, жесть у меня и прошлый код заработал))) причина — было расширение файла .wav а не mp3, я кринге
но вам спасибо
logan baby, ваш прошлый вариант мог действительно заработать. Но он создавался с нуля, а не использовался тот, который указан в html коде.
Решения вопроса 1
Junior PHP
в конце тэга body:
function soundClick()