Как вставить аудио файл в js

Обновлено: 01.07.2024

Если вам нужна дополнительная функциональность, я использовал библиотеку howler.js и нашел ее простой и полезной.

Просто используйте это:

Или, чтобы сделать это проще:

НЕ ИДЕИ, если это работает в других браузерах, кроме Chrome 73 !!

Это просто, просто получите свой audio элемент и вызовите метод play() :

Этот сайт раскрывает некоторые другие интересные вещи, которые вы можете сделать, такие как load() , pause() и некоторые другие свойства элемента audio .

Вы можете использовать Web Audio API для воспроизведения звуков. Существует довольно много аудио-библиотек, таких как howler.js, soundjs и т. Д. Если вы не беспокоитесь о старых браузерах, вы также можете проверить на

Если вы получаете следующую ошибку:

Uncaught (в обещании) DOMException: play () не удалось, потому что пользователь не взаимодействовал с документом в первую очередь.

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

Звук начнется через 0,5 секунды.

Это какой-то JS, который я придумал для детского проекта AI, с которым я работаю. Я надеюсь, что это может помочь вам.

SoundManager 2 предоставляет простой в использовании API, который позволяет воспроизводить звук в любом современном браузере, включая IE 6+. Если браузер не поддерживает HTML5, он получает помощь от Flash. Если вам нужен строго HTML5 и нет флеш-памяти, для этого есть настройка, preferFlash=false

Он поддерживает 100% Flash-бесплатное аудио на iPad, iPhone (iOS4) и других устройствах с поддержкой HTML5 + браузеры

Использовать так же просто, как:

Добавьте скрытый звук и воспроизведите его.

Я использовал этот метод для воспроизведения звука .

Вот решение для 2020 года, когда вы видите ошибку:

[Ошибка] Необработанный отказ от обещания: NotSupportedError: Операция не поддерживается. (анонимная функция) rejectPromise play (анонимная функция) (testaudio.html: 96) dispatch (jquery-3.4.1.min.js: 2: 42577)

Не будь ловким и подумай, что это старая школа oclick , я просто переместу это вниз по странице в мой jQuery или мой внешний файл JavaScript. Нет. Это должен быть onclick .

Довольно простое решение, если у вас есть тег HTML, как показано ниже:

Просто используйте JavaScript для воспроизведения, вот так:

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

Определите необходимые аудио файлы в вашем HTML
Есть кнопка запуска игры с помощью клика
Когда нажата кнопка, воспроизведите и приостановите ВСЕ панели аудиофайлов, которые вы хотите воспроизвести в начале.

Поскольку все аудиофайлы были «воспроизведены» на одном и том же OnClick, теперь вы можете воспроизводить их в любое время в игре без ограничений.

Обратите внимание, что для лучшей совместимости не используйте файлы WAV, MS не поддерживает их

Используйте mp3 и ogg, который охватывает все устройства

Повторить по мере необходимости для всех аудио в игре

Повторяйте по мере необходимости, за исключением того, что не приостанавливайте звук, который хотите услышать при запуске игры

Если вы хотите воспроизводить аудио каждый раз, когда страница открыта, сделайте это.

И вызывайте этот playMusic () всякий раз, когда вам нужно в вашем игровом коде.

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

Однако почти во всех решениях, которые я обнаружил, код JS должен активно настраивать слушателей (например, нажатия кнопок) для получения пользовательских событий для воспроизведения звука.

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

Просто с Jquery

// установить аудио теги без предварительной загрузки

// добавляем jquery для загрузки

// написать методы для игры и остановки

// решаем, как управлять звуком

ИЗМЕНИТЬ

Чтобы ответить на вопрос @ stomy, вот как вы могли бы использовать этот подход для воспроизведения списка воспроизведения :

Установите песни в объекте .

Используйте функции запуска и воспроизведения, как и раньше:

Загрузите первую песню динамически.

Сброс источника звука для следующей песни в списке воспроизведения, когда текущая песня заканчивается:

См. здесь пример этого кода в действии.

Это довольно старый вопрос, но я хочу добавить немного полезной информации. Автор темы упомянул, что он "making a game" . Так что для всех, кому нужен звук для разработки игр, есть лучший выбор, чем просто <audio> тег или HTMLAudioElement . Я думаю, вам следует рассмотреть возможность использования API веб-аудио:

В то время как для аудио в сети больше не требуется плагин, аудио-тег имеет значительные ограничения для реализации сложных игр и интерактивных приложений. Web Audio API - это высокоуровневый JavaScript API для обработки и синтеза аудио в веб-приложениях. Целью этого API является включение возможностей, имеющихся в современных игровых звуковых движках, и некоторых задач микширования, обработки и фильтрации, которые встречаются в современных настольных приложениях для производства аудио.

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

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

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

Доступ к audio в javascript

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

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

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

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

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

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

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

События audio

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Статья продолжает тему Как вставить аудио на сайт на основе WordPress Audio Player и описывает второй вариант реализации предложенного решения, при котором весь HTML код для проигрывания звука .mp3 генерируется с помощью JS.

Если перед вами стоит вопрос с какого хостинга загружать мультимедийные файлы аудио и видео, то посмотрите статью Yandex Disk REST API jQuery Plugin, в которой описан вариант вставки медиа файлов на WEB страницу с Яндекс Диска.

Для применения описанного здесь этого варианта необходимо подключить в секцию <head> web страницы файл JS из набора WordPress Audio Player (см. основную статью темы ).

Для этого добавьте туда код:

Код для подключения js файла в секцию <head> :

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

Теперь мы готовы, что бы сформировать HTML код.
В нужном месте статьи или страницы нужно будет добавить ява скрипт, который уже непосредственно будет строить код конкретного экземпляра плеера.
Внутри этого блока вы можете передать в player.swf любые из параметров которые описаны в документации (см. на сайте разработчиков).

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

Когда web page загрузиться код исполниться и содержимое предшествующего элемента <p> будет заменено на плеер в виде вот такого блока кода:
(!параметры будут те которые вы передали).

Если вы читали первый вариант реализации добавления audio, то вы обратите внимание, что внутри тега <object> отсутствует тег <audio> для использовании HTML5 технологии как запасной вариант. Т.е. скрипт сформирует нам только flash плеер в теге <object> . Если же вам этого недостаточно и вы хотите все же сделать все три уровня, описанные в главной статье, то вам тогда нужно будет переписать js функцию создающую HTML или вернуться к первому варианту без ява скрипта.

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

Синтаксис

Параметры

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) . Оно отправляется элементу <audio> , когда достаточно данных для воспроизведения (хотя возможны прерывания).
Прослушайте событие canplaythrough (en-US) . Оно отправляется, когда предполагается, что аудио должно воспроизводиться до конца без прерываний.

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

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

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

Читайте также: