Воспроизведение аудио с помощью Javascript?
Я делаю игру с HTML5 и Javascript.
Как я могу играть в аудио игры через Javascript?
13 ответов
Если вы не хотите возиться с HTML-элементами:
var audio = new Audio('audio_file.mp3');
audio.play();
использует HTMLAudioElement
интерфейс, который воспроизводит аудио так же, как <audio>
элемент.
Если вам нужно больше функциональности, я использовал ревун.js библиотеки и нашел его простым и полезным.
это легко, просто получите свой audio
элемент и называем play()
способ:
document.getElementById('yourAudioTag').play();
проверьте этот пример:http://www.storiesinflight.com/html5/audio.html
этот сайт раскрывает некоторые другие интересные вещи вы можете сделать, такие как load()
, pause()
, и несколько других свойств audio
элемент.
http://www.schillmania.com/projects/soundmanager2/
SoundManager 2 обеспечивает простой в использовании API, который позволяет воспроизводить звук в любом современном браузере, включая IE 6+. Если браузер не поддерживает HTML5, он получает помощь от flash. Если вы хотите строго HTML5 и без flash, для этого есть настройка,preferFlash=false
Он поддерживает 100% Flash-Free audio на 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/
Это довольно старый вопрос, но я хочу добавить немного полезной информации. В теме стартер упомянул, что он "making a game"
. Так что для всех, кто нуждается в аудио для разработки игры есть лучший выбор, чем просто <audio>
тег или HTMLAudioElement
. Я думаю, вы должны рассмотреть возможность использования Web Audio API:
в то время как аудио в интернете больше не требует плагина, аудио тег приносит значительные ограничения для реализации сложных игр и интерактивных приложения. Web Audio API-это высокоуровневый JavaScript API для обработки и синтеза аудио в веб-приложениях. Цель этого API состоит в том, чтобы включить возможности, найденные в современных игровых аудио движках и некоторых задачах смешивания, обработки и фильтрации, которые находятся в современных настольных приложениях для производства аудио.
легко с 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');
});
посмотреть здесь для примера этого кода в действии.
добавить скрытый звук и воспроизвести его.
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-тег, как показано ниже:
<audio id="myAudio" src="some_audio.mp3"></audio>
просто используйте JavaScript, чтобы воспроизвести его, например:
document.getElementById('myAudio').play();
если вы получаете следующую ошибку:
Uncaught (в promise) DOMException: play () не удалось, потому что пользователь сначала не взаимодействовал с документом.
это означает, что пользователь должен сначала взаимодействовать с веб-сайтом (как говорится в сообщении об ошибке). В этом случае вам нужно использовать click
или просто еще один прослушиватель событий, чтобы пользователь мог взаимодействовать с вашим сайтом.
если вы хотите автоматически загружать аудио и не хотите, чтобы пользователь взаимодействуйте с документом во-первых, вы можете использовать setTimeout
.
setTimeout(() => {
document.getElementById('mySound').play();
}, 500)
<audio id="mySound" src="sound.mp3"></audio>
звук начнется через 0,5 секунды.
я использовал этот метод для воспроизведения звука...
var audioElement;
if(!audioElement) {
audioElement = document.createElement('audio');
audioElement.innerHTML = '<source src="' + '/audio/sound.mp3'+ '" type="audio/mpeg" />'
}
audioElement.play();
Если вы хотите воспроизводить аудио при открытии страницы, сделайте так.
<script>
function playMusic(){
music.play();
}
</script>
<html>
<audio id="music" loop src="sounds/music.wav" autoplay> </audio>
</html>
и вызовите этот playMusic () всякий раз, когда вам нужно в вашем коде игры.
вы можете использовать Web Audio API для воспроизведения звуков. Есть довольно много аудиобиблиотек, таких как howler.Яш, soundjs и т. д. Если вы не беспокоитесь о старых браузерах, вы также можете проверитьhttp://musquitojs.com/. Он предоставляет простой API для создания и воспроизведения звуков.
например, для воспроизведения звука все, что вам нужно сделать, это.
import $buzz from 'musquito';
const buzz = $buzz('gunfire.mp3');
buzz.play();
библиотека также поддерживает аудио спрайты.