Как добавить музыку в javascript
Перейти к содержимому

Как добавить музыку в javascript

  • автор:

Audio()

Конструктор Audio() создаёт и возвращает новый HTMLAudioElement объект, который может быть прикреплён к документу, чтобы пользователь мог взаимодействовать и/или слушать его, либо может использоваться вне экрана для управления и воспроизведения звука.

Синтаксис

audioObj = new Audio(url);

Параметры

url Необязательный

Необязательный параметр DOMString , содержащий URL-адрес аудиофайла, который будет связан с новым аудиоэлементом.

Возвращаемое значение

Новый HTMLAudioElement объект, настроенный для воспроизведения файла, указанного в url . Свойство preload нового объекта имеет значение по умолчанию auto , а его свойство src — указанный URL-адрес или null , если адрес не указан. Если указан URL-адрес, браузер начинает асинхронно загружать медиаресурс перед возвратом нового объекта.

Примечания по использованию

Вы также можете использовать другие методы создания элементов, такие как метод createElement() объекта document , для создания нового HTMLAudioElement объекта.

Определение, когда воспроизведение может начаться

Существует три способа определить насколько аудио-файл загружен, чтобы начать воспроизведение:

  • Проверьте значение свойства readyState (en-US). Если оно равняется HTMLMediaElement.HAVE_FUTURE_DATA , значит загружено достаточно данных, чтобы начать воспроизведение и проиграть хотя бы короткое время. Если HTMLMediaElement.HAVE_ENOUGH_DATA — доступно достаточно данных, чтобы воспроизводить аудио до конца без прерываний, учитывая текущую скорость загрузки.
  • Прослушайте событие canplay (en-US). Оно отправляется элементу , когда достаточно данных для воспроизведения (хотя возможны прерывания).
  • Прослушайте событие canplaythrough (en-US). Оно отправляется, когда предполагается, что аудио должно воспроизводиться до конца без прерываний.

Лучший подход, основанный на событии:

.addEventListener("canplaythrough", (event) =>  /* аудио может быть воспроизведено; проиграть, если позволяют разрешения */ myAudioElement.play(); >); 

Использование памяти и управление

Если все ссылки на аудиоэлемент, созданные с помощью конструктора Audio() удалены, сам элемент не будет удалён из памяти механизмом сборщика мусора JavaScript, если в данный момент идёт воспроизведение. Вместо этого продолжится воспроизведение и объект останется в памяти до тех пор, пока не закончится аудио или оно не будет приостановлено (например, путём вызова pause() (en-US)). В этот момент объект подлежит уничтожению сборщиком мусора.

Спецификации

Specification
HTML Standard
# dom-audio-dev

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

  • Web media technologies (en-US)
  • HTML-элемент, реализующий этот интерфейс: .

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

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

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

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

Для начала базовая теория. Для добавления аудио на страницу служит тег audio:

Таким образом, можно добавить какую-нибудь фоновую музыку на сайт. Атрибут src отвечает за путь к воспроизводимому файлу, а атрибут autoplay отвечает за автоматическое воспроизведение файла при загрузке страницы. Теперь разберём, как сделать звуковую обработку события на JavaScript. Допустим, будем обрабатывать клик мышью по тексту:

Осталось лишь сделать функцию soundClick():

function soundClick() var audio = new Audio(); // Создаём новый элемент Audio
audio.src = ‘click.mp3’; // Указываем путь к звуку «клика»
audio.autoplay = true; // Автоматически запускаем
>

Таким образом, можно обработать звуком любое возникающее событие на странице. Единственное, что Вы должны чётко понимать — работать это всё будет только в современных браузерах, где есть поддержка HTML5. Впрочем, все используемые на данный момент браузеры (за очень редким исключением), его поддерживают в достаточно высокой степени, поэтому с воспроизведением звуков и музыки через тег audio проблем не возникнет.

Создано 02.12.2013 12:58:51

  • Михаил Русаков
  • Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

    Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
    Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

    Если Вы не хотите пропустить новые материалы на сайте,
    то Вы можете подписаться на обновления: Подписаться на обновления

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

    Порекомендуйте эту статью друзьям:

    Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

    1. Кнопка:
      Она выглядит вот так:
    2. Текстовая ссылка:
      Она выглядит вот так: Как создать свой сайт
    3. BB-код ссылки для форумов (например, можете поставить её в подписи):

    Комментарии ( 14 ):

    Adnrey 02.12.2013 16:24:02

    Здравствуйте , Уважаемый Русаков Михаил. Не подскажите как сделать , чтобы на сайте был не видимый контент , а при клике он появлялся и еще раз при клике опять закрывался. P.S.Поискал на сайте не нашел.

    tikkiwiki 02.12.2013 16:26:00

    Здравствуйте, Андрей. Делается это с помощью jQuery.

    Adnrey 02.12.2013 16:31:58

    Я не знаю толком jQuery. Можете написать?

    Avery 02.12.2013 17:56:39

    Зачем использовать библиотеку для двух строчек кода, который можно написать на ванильном JS?

    tikkiwiki 02.12.2013 18:51:26
    lev_100rus 03.12.2013 00:27:11

    Не на вкус и цвет, а оптимизация. Зачем ради такой лёгкой задачи подключать тяжеловесную библиотеку JQuery?

    tikkiwiki 03.12.2013 10:24:48
    arfaksad 03.12.2013 10:35:01

    Здравствуйте Михаил, не желаете ли вы зайти на фри ланс и вспомнить о конкурсе который создавали, и должны были объявить победителя 4 дня назад?

    Ivanho32 04.12.2013 10:32:06

    Михаил, есть одно замечание по доработке Вашего сайта, дело в том, что я забыл пароль, попытался восстановить его по почте. Но я и логин забыл тоже, но в почте не приходит логин, только имя, по которому зайти нельзя, логин можно посмотреть только тогда, когда заходишь на сайт. И нельзи ли сделать перенос караток в комментариях, а то иногда неудобно читать тот код, что присылают у вас на сайте в комментариях. И еще вопрос, нету у вас на сайте php — java скрипта новогодней елки, типо чтобы тикали часики сколько осталось до нового года, только опиралось на серверное время сервера. Ну можно еще каких-нибудь плюшек. Заранее спасибо.

    prog 14.01.2014 08:05:43

    Здраствуйте, как можно сделать на сайте отдельную категорию для музыки.

    Laura 01.05.2014 19:46:56
    ins1987 13.01.2016 20:29:47

    У меня все работает

    Alf 11.06.2014 20:11:45

    Здравствуйте, Михаил! А у меня вот такой вопрос — как сделать, что бы музыка воспроизводилась в фоновом режиме при клике на картинку. Без отображения аудиоплейера. Пусть это сработает не во всех браузерах, но это уже вторая беда.

    abuxasan 18.03.2016 19:54:32

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2024 Русаков Михаил Юрьевич. Все права защищены.

    Как включить песню при нажатии на кнопку?

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

    Отслеживать

    51.6k 202 202 золотых знака 65 65 серебряных знаков 249 249 бронзовых знаков

    задан 14 мар 2021 в 13:53

    Андрей Карев Андрей Карев

    85 8 8 бронзовых знаков

    Мне бы просто саму структуру кода узнать. Кнопка любая, музыка любая

    14 мар 2021 в 14:03

    2 ответа 2

    Сортировка: Сброс на вариант по умолчанию

    document.querySelector('button').addEventListener('click', () => < document.querySelector('audio').play() >)
      

    Отслеживать

    ответ дан 14 мар 2021 в 15:28

    123k 24 24 золотых знака 127 127 серебряных знаков 305 305 бронзовых знаков

    Допустим таким образом:

    let audio = new Audio(); audio.volume = .25; // Чтобы не испугать пользователя document.querySelector('#play').addEventListener('click', function(e) < if(e.target.value === 'Воспроизвести') < e.target.value = 'Остановить'; audio.src = e.target.getAttribute('data-url'); audio.play(); >else < e.target.value = 'Воспроизвести'; audio.currentTime = 0; audio.pause(); >>);

    Отслеживать

    ответ дан 14 мар 2021 в 15:19

    24k 4 4 золотых знака 35 35 серебряных знаков 68 68 бронзовых знаков

    @Qwertiy, не нужно «разворачивать» сниппет, я всегда его сворачиваю, даже если код одна строчка, чтобы в высоту экрана влезали ещё и ответы других пользователей.

    15 мар 2021 в 18:41

    Ну и зря. Тем более, автору стоило бы этот ответ принять — он красивее моего.

    — элемент добавления аудио на страницу

    HTML-элемент используется для встраивания звукового контента в документ. Он может содержать один или более источников аудио, представленных с помощью атрибута src или элемента – браузер выберет один наиболее подходящий. Он так же может предназначаться для потокового мультимедиа, используя интерфейс MediaStream .

    Интерактивный пример

    Контент между открывающим и закрывающим тегами элемента (см. выше) отображается в браузерах, которые не поддерживают этот элемент.

    Не все браузеры поддерживают одинаковые форматы аудио. Вы можете предоставить множество источников внутри вложенных элементов , и тогда браузер будет использовать первый, который он понимает:

    audio controls> source src="myAudio.mp3" type="audio/mpeg" /> source src="myAudio.ogg" type="audio/ogg" /> p> Ваш браузер не поддерживает HTML5 аудио. Вот взамен a href="myAudio.mp4">ссылка на аудиоa> p> audio> 

    Другие примечания по использованию:

    • если вы не укажете атрибут controls , тогда аудиоплеер не будет добавлять стандартные элементы управления звуком браузера. Вы можете создать ваши собственные элементы управления в помощью JavaScript и HTMLMediaElementAPI;
    • чтобы обеспечить точный контроль над вашим аудиоконтентом, HTMLMediaElement инициирует (вызывает) множество различных событий;
    • вы так же можете использовать Web Audio API для непосредственной генерации и управления потоками аудио из кода JavaScript;
    • элементы не могут иметь субтитры, в отличие от элементов . Смотрите «WebVTT и аудио» для более подробной информации.

    Хороший источник информации по использованию HTML-элемента – это руководство для начинающих «Видео- и аудиоконтент».

    Атрибуты

    К этому элементу применимы глобальные атрибуты.

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

    Примечание: Сайты, которые автоматически проигрывают аудио (или видео с аудиодорожкой) могут быть неприятными для пользователей, поэтому этого следует по возможности избегать. Если вам необходимо предлагать функцию автовоспроизведения, то вы должны сделать её Opt-in (вид подписки), то есть когда пользователь специально (сам) включил её. Тем не менее, это может быть полезно, при создании элементов мультимедиа, чей источник будет установлен позднее под контролем пользователя.

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

    Этот атрибут указывает, следует ли использовать CORS при загрузке мультимедиа или нет. Допустимые значения:

    • anonymous : Запрос cross-origin (т.е. с HTTP-заголовком Origin ) выполняется, но параметры доступа не передаются (т.е. нет cookie, не используется стандарт X.509 или базовая HTTP-аутентификация);
    • use-credentials : Запрос cross-origin (т.е. с HTTP-заголовком Origin ) выполняется вместе с передачей параметров доступа (т.е. есть cookie, используется стандарт X.509 или базовая HTTP-аутентификация).Если этот атрибут не задан, то CORS при загрузке мультимедиа не используется (т.е. без отправки HTTP-заголовка Origin ). Если задан неправильно, то он обрабатывается так, как если бы использовалось значение anonymous . Для получения дополнительной информации смотрите «Настройки атрибутов CORS».

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

    Атрибут логического типа, который указывает, будет ли звук изначально отключён. Значением по умолчанию является false .

    Этот атрибут предназначен для того, чтобы указать браузеру, что, по мнению автора, приведёт к лучшему взаимодействию с пользователем. Он может иметь одно из следующих значений:

    • none : указывает, что аудио не должно предварительно загружаться;
    • metadata : указывает, что предварительно загружаются только метаданные аудио (например, продолжительность аудио);
    • auto : указывает, что весь файл аудио может быть предварительно загружен, даже если пользователь не предполагает его использовать;
    • пустая строка: синоним значения auto .Значение по умолчанию отличается для каждого браузера. Спецификация рекомендует установить значение metadata .

    • Атрибут autoplay имеет приоритет над preload . Если autoplay указан, браузер, очевидно, должен будет начать загрузку аудио для воспроизведения.
    • Спецификация не обязывает браузер придерживаться значения этого атрибута – это просто совет.

    URL аудио для встраивания. Это является темой контроля доступа HTTP. Этот атрибут является необязательным; вы можете вместо него использовать элемент внутри блока audio ( ), чтобы указать аудио для встраивания.

    События

    Этот элемент может инициировать (вызывать) различные события (en-US) .

    Взаимодействие с CSS

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

    Стандартные элементы управления имеют значение свойства display , равное inline , и зачастую хорошей идеей является установка этого свойства в значение block , чтобы улучшить контроль над позиционированием и разметкой, если вы не хотите, чтобы он находился внутри текстового блока или чего-то подобного.

    Вы можете стилизовать стандартные элементы управления CSS-свойствами, которые влияют на блок как единое целое, например, вы можете задать border и border-radius , padding , margin и т.д. Тем не менее вы не можете стилизовать отдельные компоненты внутри аудиоплеера (например, изменить размер кнопок, иконок, размер шрифта и т.д.), и элементы управления в разных браузерах отличаются.

    Чтобы получить внешний вид совместимый с разными браузерами, вам необходимо создать собственные элементы управления. Они могут быть размечены и стилизованы любым удобным для вас способом и затем может быть использован JavaScript вместе с API HTMLMediaElement для объединения функций, которые они выполняют.

    Примеры

    Базовое использование

    Следующий пример показывает простое использования элемента для воспроизведения файла в формате OGG. Он будет автоматически воспроизводиться из-за атрибута autoplay . Также он содержит резервный контент, на случай отсутствия поддержи браузером элемента .

    audio src="AudioTest.ogg" autoplay> Ваш браузер не поддерживает элемент code>audiocode>. audio> 

    Элемент с элементом

    В этом примере указывается, какой аудиотрек будет добавлен с помощью атрибута src во вложенный элемент , а не в непосредственно элемент . Всегда полезно включать MIME-тип файла в атрибут type , так как браузер может немедленно определить, может ли он воспроизвести этот файл, и не тратить на него время, если не может.

    audio controls="controls"> source src="foo.wav" type="audio/wav" /> Ваш браузер не поддерживает элемент code>audiocode>. audio> 

    Элемент с множеством элементов

    Этот пример включает множество элементов . Браузер попытается загрузить источник из первого элемента (Opus), если он не в состоянии воспроизвести его, тогда он перейдёт ко второму (Vorbis) и, наконец, к третьему (MP3), если все предыдущие по каким-либо причинам не могут быть воспроизведены браузером:

    audio controls=""> source src="foo.opus" type="audio/ogg; codecs=opus" /> source src="foo.ogg" type="audio/ogg; codecs=vorbis" /> source src="foo.mp3" type="audio/mpeg" /> audio> 

    Проблемы доступности

    Audio with spoken dialog should provide both captions and transcripts that accurately describe its content. Captions allow people who are experiencing hearing loss to understand an audio recording’s content as the recording is being played, while transcripts allow people who need additional time to be able to review the recording’s content at a pace and format that is comfortable for them.

    If automatic captioning services are used, it is important to review the generated content to ensure it accurately represents the source audio.

    In addition to spoken dialog, subtitles and transcripts should also identify music and sound effects that communicate important information. This includes emotion and tone:

    1 00:00:00 --> 00:00:45 [Energetic techno music] 2 00:00:46 --> 00:00:51 Welcome to the Time Keeper's podcast! In this episode we're discussing which Swisswatch is a wrist switchwatch? 16 00:00:52 --> 00:01:02 [Laughing] Sorry! I mean, which wristwatch is a Swiss wristwatch?
    • Субтитры и скрытые субтитры (en-US).
    • Формат Web Video Text Tracks (WebVTT).
    • WebAIM: субтитры, стенограммы и описания аудио.
    • Понимание WCAG, Руководство 1.2 объяснения (en-US).
    • Понимание критерия успешного исхода 1.2.1 | W3C Понимание WCAG 2.0
    • Понимание критерия успешного исхода 1.2.2 | W3C Понимание WCAG 2.0

    Техническая сводка

    Категории контента Потоковый контент, фразовый контент, встроенный контент. Если элемент имеет атрибут controls , он так же принадлежит к категориям интерактивного и явного контента.
    Допустимое содержимое Если элемент имеет атрибут src : ноль или более элементов , за которыми следует прозрачный контентет, который не содержит элементов или . Иначе: ноль или более элементов , за которыми следует ноль или более элементов , за которыми следует прозрачный контент, который не содержит элементов или .
    Пропуск тегов Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.
    Допустимые родители Любой элемент, который разрешает встроенный контент в качестве содержимого.
    Допустимые ARIA-роли application (en-US)
    DOM-интерфейс HTMLAudioElement

    Спецификации

    Specification
    HTML Standard
    # the-audio-element

    Совместимость с браузерами

    BCD tables only load in the browser

    Смотрите также

    • Медиа форматы для HTML-элементов audio и video.
    • Web Audio API.
    • HTMLAudioElement .
    • nsIDOMHTMLMediaElement .
    • .
    • .
    • Видео и аудио контент.
    • Основы кросс-браузерного audio.

    Found a content problem with this page?

    • Edit the page on GitHub.
    • Report the content issue.
    • View the source on GitHub.

    This page was last modified on 6 янв. 2024 г. by MDN contributors.

    Your blueprint for a better internet.

    MDN

    Support

    • Product help
    • Report an issue

    Our communities

    Developers

    • Web Technologies
    • Learn Web Development
    • MDN Plus
    • Hacks Blog
    • Website Privacy Notice
    • Cookies
    • Legal
    • Community Participation Guidelines

    Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
    Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *