Как вставить аудио файл в js
Если вам нужна дополнительная функциональность, я использовал библиотеку 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) ). В этот момент объект подлежит уничтожению сборщиком мусора.
Читайте также: