Как добавить звук html

Синтаксис:

Несколько элементов можно связать с различными файлами. Браузер будет использовать первый запускаемый формат.

autoplay — видео начинает воспроизводиться автоматически после загрузки страницы;

controls — добавляет панель управления к видеоролику;

loop — повторяет воспроизведение видео с начала после его завершения;

height — задает высоту области для воспроизведения видеоролика;

width — задает ширину области для воспроизведения видеоролика;

preload — используется для загрузки видео вместе с загрузкой веб-страницы;

src — указывает путь к воспроизводимому файлу.

Закрывающий тег oбязателен.
Внутри контейнера также можно написать пояснительный текст, который будет выводиться в браузерах, не работающих с этим тегом.
Атрибут controls добавляет элементы управления видео, такие как воспроизведение, пауза, и объем.
Неплохо всегда включать атрибуты ширины и высоты.
Если высота и ширина не установлена, браузер не знает размер видео. Эффект будет такой, что страница будет обновляться (или будет мерцание) в то время как видео загружается.

Пример:

Результат примера в браузере:

На сервисе YouTube под видео-элементами есть кнопка «Поделиться» — «HTML-код», полученный код можно вставить в любое место HTML-документа для запуска этого ролика.

Как добавить звук html

Благодаря тегу audio появившемуся в HTML5, можно очень просто добавлять звук на сайт. В javascript работать со звуком позволяет соответствующий класс Audio, а проверить поддержку формата звукового файла в браузере — метод canPlayType.

Доступ к audio в javascript

Если в HTML есть тег audio , доступ к соответствующему объекту Audio можно получить через имя тега

 var audio = document.getElementsByTagName('audio')[index]; 

 var audio = document.getElementById('my-audio-id'); 

Объект Audio также можно создать в js.

Создание объекта Audio в javascript

 var myAudio = new Audio(); myAudio.src = 'sound.ogg'; //или var myAudio = new Audio('sound.ogg'); 

Создание объекта Audio в jQuery

 $('audio').attr('src', 'audio_file.mp3') 

Используется один из поддерживаемых форматов (mp3, wav, ogg)

Воспроизведение звука и пауза:

 //воспроизведение звука myAudio.play(); // пауза myAudio.pause(); // после паузы воспроизведение продолжится с места остановки myAudio.play(); 

Как остановить воспроизведение audio

Команды stop нет, и чтобы остановить воспроизведение звукового файла, нужно два действия — пауза и задание нулевого значения для свойства currentTime— текущее время:

 // Функция stop для Audio: HTMLAudioElement.prototype.stop = function() < this.pause(); this.currentTime = 0.0; >. // использование myAudio.stop(); 

События audio

loadeddata — данные загружены

Используем событие loadeddata , чтобы начать воспроизведение большого звукового файла после окончания загрузки:

 var loaded = false; var myAudio = new Audio(); myAudio.addEventListener('loadeddata', function() < loaded = true; myAudio.play(); >, false); myAudio.src = 'background.ogg'; 

Обработчик события окончания загрузки записан раньше, т.к. он должен быть доступен во время загрузки файла, которая начинается сразу после задания src.

error — обработка ошибки загрузки

 myAudio.addEventListener('error' , function() < alert('ошибка загрузки файла'); >, false); myAudio.src = 'nofile.ogg'; 

onended — окончание воспроизведения

Длительность звукового файла

 var audio = document.createElement('audio'); audio.src = 'mus3.mp3'; // time=NaN var time = audio.duration; 

Свойство duration может быть недоступно, если не завершена загрузка метаданных, правильно:

 audio.addEventListener('loadedmetadata', function() < time = audio.duration; >); 

Изменение свойств audio

Используем свойство muted — кнопки включения и выключения звука на странице:

Хотелось бы выключать фоновый звук, когда посетитель сайта переключается на другое окно или вкладку браузера. Важно, что выражение muted=true сработает, если будет выполняться после завершения загрузки звукового файла, т.е. его следует поместить в обработчик события loadeddata:

 var loaded = false; var myAudio = new Audio(); myAudio.addEventListener('loadeddata', function() < myAudio.muted = true; >, false); myAudio.src = 'background.ogg'; myAudio.play(); 

Поддержка элемента Audio и форматов звуковых файлов

Для проверки поддержки форматов звуковых файлов браузером используется метод canPlayType с параметром текстовым значением MIME-типа.

 audio.canPlayType('audio/ogg'); 

Можно явно указать кодек:

 audio.canPlayType('audio/ogg; codecs="vorbis"'); 

canPlayType возвращает одно из 3 значений:

• probably — наверное
• maybe — может быть
• «» (пустая строка) — формат не поддерживается

Пример проверки поддержки формата mp3

Можете проверить, Opera не поддерживает формата mp3

 var audio = new Audio(); var canPlayMmp3 = !!audio.canPlayType && audio.canPlayType('audio/mp3') != ""; if(!canPlayMmp3)

!! преобразует объект строки в логический тип

Пример проверки поддержки audio и форматов файлов

Если функция check_audio возвращает false, браузер не поддерживает элемент audio. Если элемент audio поддерживается, проверяется возможность использования форматов файлов ogg, mpeg, wav и m4a.

Озвучка сайта

Очень частый вопрос: как добавить на сайт аудио, то-есть музыку, или собственное голосовое приветствие.

Пошаговый ответ в этой статье.

Для того чтобы на сайте зазвучала фоновая музыка, первым делом нужен файл этой музыки.

Значит идём в интернет, забиваем в поиск название композиции которую вы хотите слушать на сайте и добавляем слово Скачать.

Выбрав приглянувшийся вариант, желательно mp3, скачиваете файл на свой компьютер.

Скачанный файл должен быть легко доступен, поэтому его нужно разместить в корневой папке вашего сайта.

Для пользователей WordPress, это папка wp-content.

Для аудио файлов, в папке wp-content создаём папку audio, так как в коробочке она заранее не предусмотрена и уже в неё загружаем скачанный файл.

Теперь нужно определится — на всех страницах будет звучать фоновая музыка, или только на одной или нескольких.

а) Музыка звучит на отдельной странице.

Заходим на нужную страницу или запись, переходим в Редактировать, переводим редактор в режим Текст, и в любом месте текстового поля вставляем следующий код:

audio> source src color: #008080;">https://starper55plys.ru/wp-content/audio/lybe1.mp3"> /audio>

Тег запускает медиаплеер браузера, а в теге указывается путь по которому расположен ваш файл.

Для пользователей WordPress нужно будет только поменять название моего сайта starper55plys.ru на своё, и название моего файла lybe1 на название своего.

б) Музыка звучит на всех страницах сайта.

Заходим в Консоль — Внешний вид — Редактор — Заголовок (header.php) и после открывающего тега Вставляем этот же код.

Не забудьте обновить файл.

Теперь о настройках.

Тег принимает несколько атрибутов, с помощью которых можно управлять воспроизведением.

audio controls color: #008080;">controls">

Если добавить этот атрибут, то в том месте где вы расположите код, на странице появится вот такая панелька упраления

audio autoplay color: #008080;">autoplay">

Музыка начинает играть сразу после загрузки страницы.

audio loop color: #008080;">loop">

Музыка после завершения повторяется бесконечно.

Атрибуты можно добавлять в тег как по отдельности, так и все сразу.

Как сделать голосовой файл

Для создания голосового файла потребуется микрофон.

Вставьте разьём микрофона в гнездо на компьютере и пройдите в меню Пуск — Все программы — Стандартные — Звукозапись.

Щелкаем по Звукозапись, и появляется вот такое окно

Нажимаем Начать запись и можно произносить в микрофон своё приветствие, или что-то ещё.

Когда всё будет сказано, нажимаем Остановить запись, после чего сразу появится окно поисковика для сохранения записанного файла.

Сохраняете его в нужную папку, чтоб не потерять.

Теперь этот файл нужно загрузить в корень сайта в созданную папку audio, туда же где и музыка.

На страницы файл вставляется и настраивается точно так же как и музыкальный.

Если вам нужно запустить и музыку и голосовое приветствие, то каждый из файлов помещаете в отдельный тег .

Теперь, я надеюсь, вам не сложно будет установить музыку на сайт

Желаю творческих успехов.