Для добавления элемента описывающего аудио файл на страницу, используется тег . Нужно обратить внимание, что не все форматы аудио файлов поддерживаются браузерами. В теге необходимо обязательно определить путь к файлу, посредством атрибута src или вложенным тегом . Внутри контейнера можно написать текст, который будет выводиться в браузерах, не работающих с этим тегом. Так же можно добавить вложенные теги для отображения панели управления (play/pause) и другие.
src="URL">
controls>src="URL">
controls>src="URL"> Тег audio не поддерживается вашим браузером. href="audio/music.mp3">Скачайте музыку
Как сделать фоновую музыку в 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()
Как вставить музыку на сайте
Музыка на сайте — это скорее редкость, чем норма. Вставляя музыку на сайт, нужно понимать, что некоторых пользователей она может и вовсе оттолкнуть. В этой статье мы рассмотрим несколько вариантов вставки музыки на сайт, а также рассмотрим как сделать фоновую музыку.
Как вставить фоновую музыку на сайт
Вставка фоновой музыки на сайт самый опасный вариант в плане потери посетителей. Потому что фоновою музыку мало того, что нельзя никак выключить, так к тому же и громкость ее никак не регулируется (все зависит от текущей громкости на компьютере). Так что надо сто раз подумать, прежде чем вставлять фоновую музыку.
Есть два способа для вставки музыки в html
Вариант 1. Через html тег Синтаксис для вставки фоновой музыки
bgsound src value">адрес_аудиофайла" [атрибуты]>
У тега есть несколько атрибутов:
loop=»значение» — количество повторений музыки (если -1, то повторяется бесконечно)
balance=»значение» — стереобаланс (от -10000 до 10000)
У каждого браузера штатный проигрыватель будет выглядеть по разному, поэтому рассматривать каждый из них в отдельности мы не будем.
В html5 можно использовать тег
Смысл использования тега вызывает сомнения, поскольку до сих пор у старых браузеров отсутствует поддержка html5.
Синтаксис тег
audio src value">адрес_музыки.mp3" controls [атрибуты]> Браузер не поддерживает audio audio controls>
Следующие атрибуты можно использовать:
autoplay=»значение» — включить музыку сразу при загрузке страницы
controls=»значение» — отображать панель управления плеера в браузере
loop=»значение» — отвечает за цикличность
preload=»значение» — загружать музыку сразу с загрузкой страницы
Рассмотренные варианты на мой взгляд не являются идеальными решениями, поскольку все базируются на штатных проигрывателях. У каждого браузера будет свой штатный проигрыватель по умолчанию, а в каких-то он вообще может не работать. Поэтому лучше всего скачать плеер к себе на сайт и уже с него загружать музыку. У такого плеера будет функции остановки, настройки громкости и т.п. — весь необходимый набор для простого пользователя.
Музыка и звуки на HTML-странице
currentTime Позиция курсора проигрывателя, double (секунды) duration Длительность воспроизведения, double (секунды); только чтение muted Заглушен ли звук, boolean paused Остановлено ли воспроизведение, boolean volume Уровень громкости, double (от 0 до 1) played Были ли воспроизведены интервалы полностью, возвращает объект TimeRanges seekable Интервалы, которые готовы для немедленного воспроизведения, возвращает объект TimeRanges buffered Возвращает объект TimeRanges буферизованного файла
События тега
durationchange Обновлён атрибут duration ended Воспроизведение остановлено по достижению конца pause Воспроизведение было остановлено (обратите внимание на отсутствие события stop) play Файл начал проигрываться timeupdate Текущая позиция воспроизведения изменилась (обычно каждые 250 мс) volumechange Значение изменилось canplay Файл может быть воспроизведен, но, возможно, потребуется пауза, пока он загружается. canplaythrough При имеющемся темпе скачивания предполагается, что файл может быть проигран от начала до конца без перерыва. progress Браузер показывает состояние проигрывания (обычно каждые 250 мс)
Объект TimeRanges
Содержит данные о частях буферизованных участков медиафайла (один или более — сколько успело буферизоваться) и имеет свойства:
length Число интервалов start(index Начальное время указанного интервала end(index) Конечное время указанного интервала (отсчитывается от начала воспроизведения)
Управление воспроизведением через JavaScript
Для создания объекта audio в javascript используется:
var audio = new Audio();
Чтобы определить, поддерживается ли данный формат файла в браузере используйте метод canPlayType() , который возвращает одно из 3 значений:
probably,
maybe,
«» (пустая строка).
var audio = new Audio(); var canPlayOgg = !!audio.canPlayType && audio.canPlayType('audio/ogg; codecs="vorbis"') != "";
var audio = document.getElementById('my-audio-id'); // получим доступ к объекту audio. audio.canPlayType('audio/ogg'); // или сразу задав кодек: // audio.canPlayType('audio/ogg; codecs="vorbis"');
Как вариант, объект создаётся полностью на Javascript.
var audio = new Audio();
Старые форматы вставки музыки:
Пример
Поддерживаемые форматы: Ogg Vorbis, WAV PCM, MP3, AAC, Speex (зависит от конкретного браузера). Подробнее на Wiki: Audio format support
