Воспроизведение аудио с помощью Javascript?
Я делаю игру с HTML5 и Javascript.
Как я могу играть в игровой звук через Javascript?
22 ответа
Если вы не хотите связываться с элементами HTML:
var audio = new Audio('audio_file.mp3');
audio.play();
Это использует HTMLAudioElementинтерфейс, который воспроизводит аудио так же, как <audio> стихия
Если вам нужно больше функциональности, я использовал библиотеку howler.js и нашел ее простой и полезной.
Это просто, просто возьми audio элемент и вызвать play() метод:
document.getElementById('yourAudioTag').play();
Проверьте этот пример: http://www.storiesinflight.com/html5/audio.html
Этот сайт раскрывает некоторые другие интересные вещи, которые вы можете сделать, такие как load(), pause()и несколько других свойств audio элемент.
Это довольно старый вопрос, но я хочу добавить немного полезной информации. Автор темы упомянул, что он "making a game", Так что для всех, кому нужен звук для разработки игр, есть лучший выбор, чем просто <audio> тег или HTMLAudioElement, Я думаю, вы должны рассмотреть вопрос об использовании Web Audio API:
В то время как для аудио в сети больше не требуется плагин, аудио-тег имеет значительные ограничения для реализации сложных игр и интерактивных приложений. Web Audio API - это высокоуровневый JavaScript API для обработки и синтеза аудио в веб-приложениях. Целью этого API является включение возможностей, имеющихся в современных игровых звуковых движках, и некоторых задач микширования, обработки и фильтрации, которые встречаются в современных настольных приложениях для производства аудио.
http://www.schillmania.com/projects/soundmanager2/
SoundManager 2 предоставляет простой в использовании API, который позволяет воспроизводить звук в любом современном браузере, включая IE 6+. Если браузер не поддерживает HTML5, он получает помощь от Flash. Если вы хотите строго HTML5 и без флэш-памяти, есть настройка для этого, preferFlash=false
Он поддерживает 100% Flash-бесплатное аудио на iPad, iPhone (iOS4) и других устройствах с поддержкой HTML5 + браузеры
Использовать так же просто, как:
<script src="soundmanager2.js"></script>
<script>
// where to find flash SWFs, if needed...
soundManager.url = '/path/to/swf-files/';
soundManager.onready(function() {
soundManager.createSound({
id: 'mySound',
url: '/path/to/an.mp3'
});
// ...and play it
soundManager.play('mySound');
});
</script>
Вот демонстрация этого в действии: http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/
Просто с Jquery
// установить аудио теги без предварительной загрузки
<audio class="my_audio" controls preload="none">
<source src="audio/my_song.mp3" type="audio/mpeg">
<source src="audio/my_song.ogg" type="audio/ogg">
</audio>
// добавляем jquery для загрузки
$(".my_audio").trigger('load');
// написать методы для игры и остановки
function play_audio(task) {
if(task == 'play'){
$(".my_audio").trigger('play');
}
if(task == 'stop'){
$(".my_audio").trigger('pause');
$(".my_audio").prop("currentTime",0);
}
}
// решаем, как управлять звуком
<button onclick="play_audio('play')">PLAY</button>
<button onclick="play_audio('stop')">STOP</button>
РЕДАКТИРОВАТЬ
Чтобы ответить на вопрос @ stomy, вот как вы могли бы использовать этот подход для воспроизведения плейлиста:
Установите ваши песни в объекте:
playlist = {
'song_1' : 'audio/splat.mp3',
'song_2' : 'audio/saw.mp3',
'song_3' : 'audio/marbles.mp3',
'song_4' : 'audio/seagulls.mp3',
'song_5' : 'audio/plane.mp3'
}
Используйте функции запуска и воспроизведения, как раньше:
$(".my_audio").trigger('load');
function play_audio(task) {
if(task == 'play'){
$(".my_audio").trigger('play');
}
if(task == 'stop'){
$(".my_audio").trigger('pause');
$(".my_audio").prop("currentTime",0);
}
}
Загрузите первую песню динамически:
keys = Object.keys(playlist);
$('.my_audio').append("<source id='sound_src' src=" + playlist[keys[0]] + " type='audio/mpeg'>");
Сброс источника звука для следующей песни в списке воспроизведения, когда текущая песня заканчивается:
count = 0;
$('.my_audio').on('ended', function() {
count++;
$("#sound_src").attr("src", playlist[keys[count]])[0];
$(".my_audio").trigger('load');
play_audio('play');
});
Смотрите здесь для примера этого кода в действии.
Если вы получаете следующую ошибку:
Uncaught (в обещании) DOMException: play() не удалось, потому что пользователь не взаимодействовал с документом в первую очередь.
Это означает, что пользователь должен сначала взаимодействовать с сайтом (как говорится в сообщении об ошибке). В этом случае вам нужно использовать click или просто другой прослушиватель событий, чтобы пользователь мог взаимодействовать с вашим сайтом.
Если вы хотите автоматически загрузить аудио и не хотите, чтобы пользователь сначала взаимодействовал с документом, вы можете использовать setTimeout,
setTimeout(() => {
document.getElementById('mySound').play();
}, 500)<audio id="mySound" src="sound.mp3"></audio>Звук начнется через 0,5 секунды.
Добавьте скрытый звук и воспроизведите его.
function playSound(url){
var audio = document.createElement('audio');
audio.style.display = "none";
audio.src = url;
audio.autoplay = true;
audio.onended = function(){
audio.remove() //Remove when played.
};
document.body.appendChild(audio);
}
С учетом требований безопасности, согласно которым пользователь должен взаимодействовать с веб-страницей, чтобы было разрешено аудио, я делаю это именно так, основываясь на чтении многих статей, в том числе на этом сайте.
- Определите необходимые аудиофайлы в вашем html
- Есть кнопка запуска игры с onclick
- Когда кнопка нажата, затем воспроизведите и приостановите ВСЕ аудиофайлы на панели, которую вы хотите воспроизвести в начале
Поскольку все аудиофайлы были "воспроизведены" на одном и том же OnClick, теперь вы можете воспроизводить их в любое время в игре без ограничений.
Обратите внимание, что для лучшей совместимости не используйте файлы wav, MS их не поддерживает.
Используйте mp3 и ogg, которые подходят для всех устройств
Пример:
<audio id="welcome">
<source src="URL/welcome.ogg" type="audio/ogg">
<source src="URL/welcome.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
повторить по мере необходимости для всего звука в игре
Потом:
document.getElementById("welcome").play();
document.getElementById("welcome").pause();
повторяйте при необходимости, за исключением того, что не ставьте на паузу звук, который вы хотите услышать при запуске игры
Довольно простое решение, если у вас есть тег HTML, как показано ниже:
<audio id="myAudio" src="some_audio.mp3"></audio>
Просто используйте JavaScript для воспроизведения, вот так:
document.getElementById('myAudio').play();
У меня были некоторые проблемы, связанные с возвратом объекта аудиообещания, и некоторые проблемы, связанные с взаимодействием пользователя со звуками, в результате чего я использовал этот маленький объект,
Я бы порекомендовал реализовать звуки воспроизведения, наиболее близкие к пользовательскому событию взаимодействия.
var soundPlayer = {
audio: null,
muted: false,
playing: false,
_ppromis: null,
puse: function () {
this.audio.pause();
},
play: function (file) {
if (this.muted) {
return false;
}
if (!this.audio && this.playing === false) {
this.audio = new Audio(file);
this._ppromis = this.audio.play();
this.playing = true;
if (this._ppromis !== undefined) {
this._ppromis.then(function () {
soundPlayer.playing = false;
});
}
} else if (!this.playing) {
this.playing = true;
this.audio.src = file;
this._ppromis = soundPlayer.audio.play();
this._ppromis.then(function () {
soundPlayer.playing = false;
});
}
}
};
И реализовать это следующим образом:
<button onclick="soundPlayer.play('https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3');">Play</button>
Если вы хотите иметь возможность воспроизводить звук, даже если вкладка браузера в данный момент не выбрана, вам необходимо загрузить аудиоресурс при загрузке страницы.
Вот так:
var audio = new Audio('audio/path.mp3');
function playSound(){
audio.play();
}
См. Этот вопрос для более подробной информации
Я использовал этот метод для воспроизведения звука...
var audioElement;
if(!audioElement) {
audioElement = document.createElement('audio');
audioElement.innerHTML = '<source src="' + '/audio/sound.mp3'+ '" type="audio/mpeg" />'
}
audioElement.play();
const playAudio = (path) => {
new Audio(path ?? 'defaultPath').play()
}
playAudio('path')`
Если вы хотите воспроизводить аудио каждый раз, когда страница открыта, сделайте это.
<script>
function playMusic(){
music.play();
}
</script>
<html>
<audio id="music" loop src="sounds/music.wav" autoplay> </audio>
</html>и вызывайте этот playMusic() всякий раз, когда вам нужно в вашем игровом коде.
Вы можете использовать Web Audio API для воспроизведения звуков. Существует довольно много аудио-библиотек, таких как howler.js, soundjs и т. Д. Если вы не беспокоитесь о старых браузерах, вы можете также зайти на http://musquitojs.com/. Он предоставляет простой API для создания и воспроизведения звуков.
Например, для воспроизведения звука все, что вам нужно сделать, это.
import $buzz from 'musquito';
const buzz = $buzz('gunfire.mp3');
buzz.play();
Библиотека также поддерживает Audio Sprites.
Просто используйте это:
<video controls="" autoplay="" name="media"><source src="Sound URL Here" type="audio/mpeg" /></video>
Или, чтобы сделать это проще:
<video controls="" autoplay="" name="media">
<source src="Sound URL Here" type="audio/mpeg" />
</video>
Образец:
<video controls="" autoplay="" name="media">
<source src="https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3" type="audio/mpeg">
</video>НЕ ИДЕИ, если это работает на других браузерах, кроме Chrome 73!!
Это какой-то JS, который я придумал для детского AI-проекта, с которым я работаю. Я надеюсь, что это может помочь вам.
<!DOCTYPE html>
<html>
<head>
<title>
js prompt AI
</title>
<style>
#button {
border: 1px solid black;
border-radius: 10px;
font-size: 22px;
height:65px;
width:100px;
text-align: center;
line-height: 65px;
}
</style>
</head>
<body>
<audio id="myAudio" src="./how_are_you.m4a"></audio>
<p>To Interact with the AI please click the button</p>
<div id=button>click</div>
<script>
var button = document.getElementById("button");
function playBack() {
button.addEventListener("click", function (){
var talk = prompt("If you wish for the AI to respond type hi");
var myAudio = document.getElementById("myAudio");
if(talk === "hi") {
myAudio.play();
}
}) ;
}
playBack();
</script>
</body>
</html>
В ответ вы можете использовать ref:
// typescript
const audRef = useRef(null);
const playAudio = () => {
(audRef.current as any).play();
}
...
// html
<audio controls src={your_audio} ref={audRef} />
<button onClick={playAudio}>Play</button>
У меня были некоторые проблемы с воспроизведением звука, особенно после того, как Chrome обновил, что пользователь должен сначала взаимодействовать с документом.
Однако почти во всех найденных мною решениях код JS должен активно настраивать слушателей (например, нажатия кнопок) на получение пользовательских событий для воспроизведения звука.
В моем случае я просто хотел, чтобы моя игра воспроизводила BGM, как только игрок взаимодействует с ней, поэтому я сделал себя простым слушателем, который постоянно проверяет, взаимодействует ли веб-страница или нет.
const stopAttempt = setInterval(() => {
const audio = new Audio('your_audio_url_or_file_name.mp3');
const playPromise = audio.play();
if (playPromise) {
playPromise.then(() => {
clearInterval(stopAttempt)
}).catch(e=>{
console.log('' + e);
})
}
}, 100 )
Вот решение на 2020 год, когда вы видите ошибку:
[Ошибка] Необработанное отклонение обещания: NotSupportedError: операция не поддерживается. (анонимная функция) rejectPromise play (анонимная функция) (testaudio.html:96) отправка (jquery-3.4.1.min.js:2:42577)
<div onclick="new Audio('/assets/test.mp3').play()">aaa</div>
Не будь ловким и думай, ох, это старая школа oclick, Я просто переместу его вниз по странице в свой jQuery или внешний файл JavaScript. Нет. Это должно бытьonclick.