Lecture audio avec Javascript?
Je fais un jeu avec HTML5 et Javascript.
Comment puis-je jouer au jeu audio via Javascript?
Si vous ne voulez pas jouer avec les éléments HTML:
_var audio = new Audio('audio_file.mp3');
audio.play();
__var audio = new Audio('https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3');
audio.play();_Ceci utilise l'interface HTMLAudioElement , qui lit l'audio de la même manière que l'élément <audio> .
Si vous avez besoin de plus de fonctionnalités, j'ai utilisé la bibliothèque howler.js et je l'ai trouvée simple et utile.
_<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.1/howler.min.js"></script>
<script>
var sound = new Howl({
src: ['https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3'],
volume: 0.5,
onend: function () {
alert('Finished!');
}
});
sound.play()
</script>_C'est simple, récupérez votre élément audio et appelez la méthode play():
document.getElementById('yourAudioTag').play();
Découvrez cet exemple: http://www.storiesinflight.com/html5/audio.html
Ce site présente certaines des choses intéressantes que vous pouvez faire, telles que load(), pause() et quelques autres propriétés de l'élément audio.
http://www.schillmania.com/projects/soundmanager2/
SoundManager 2 fournit une API facile à utiliser qui permet de lire le son dans tout navigateur moderne, y compris IE 6+. Si le navigateur ne prend pas en charge HTML5, il reçoit de l'aide de Flash. Si vous voulez strictement HTML5 et pas de flash, il existe un paramètre pour cela, preferFlash=false
Il prend en charge 100% du son sans flash sur iPad, iPhone (iOS4) et autres appareils compatibles avec HTML5
L'utilisation est aussi simple que:
<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>
En voici une démonstration en action: http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/
C'est une question assez ancienne mais je veux ajouter quelques informations utiles. Le starter du sujet a mentionné qu'il est "making a game". Donc, pour tous ceux qui ont besoin d’audio pour le développement de jeux, il existe un meilleur choix qu’une simple balise <audio> ou une HTMLAudioElement. Je pense que vous devriez envisager l'utilisation de Web Audio API :
Bien que l’audio sur le Web n’exige plus de plug-in, la balise audio présente des limitations importantes pour la mise en œuvre de jeux sophistiqués et d’applications interactives. L'API Web Audio est une API JavaScript de haut niveau pour le traitement et la synthèse audio dans des applications Web. L'objectif de cette API est d'inclure les fonctionnalités des moteurs audio de jeux modernes et certaines tâches de mixage, de traitement et de filtrage que l'on trouve dans les applications de production audio de bureau modernes.
Facile avec JQuery
// définit les balises audio sans précharge
<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>
// ajoute jquery à charger
$(".my_audio").trigger('load');
// écrit des méthodes pour jouer et arrêter
function play_audio(task) {
if(task == 'play'){
$(".my_audio").trigger('play');
}
if(task == 'stop'){
$(".my_audio").trigger('pause');
$(".my_audio").prop("currentTime",0);
}
}
// décide comment contrôler l'audio
<button onclick="play_audio('play')">PLAY</button>
<button onclick="play_audio('stop')">STOP</button>
EDIT
Pour répondre à la question de @ stomy, voici comment vous utiliseriez cette approche pour lire une liste de lecture :
Définissez vos chansons dans un objet:
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'
}
Utilisez les fonctions de déclenchement et de lecture comme auparavant:
$(".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);
}
}
Charge le premier morceau de manière dynamique:
keys = Object.keys(playlist);
$('.my_audio').append("<source id='sound_src' src=" + playlist[keys[0]] + " type='audio/mpeg'>");
Réinitialise la source audio à la chanson suivante de la liste de lecture, à la fin de la chanson en cours:
count = 0;
$('.my_audio').on('ended', function() {
count++;
$("#sound_src").attr("src", playlist[keys[count]])[0];
$(".my_audio").trigger('load');
play_audio('play');
});
Voir ici pour un exemple de ce code en action.
Si vous obtenez l'erreur suivante:
Non pris (promis) DOMException: play () a échoué car l'utilisateur n'a pas interagi avec le document auparavant.
Cela signifie que l'utilisateur doit d'abord interagir avec le site Web (comme l'indique le message d'erreur). Dans ce cas, vous devez utiliser click ou tout simplement un autre écouteur d'événement, afin que l'utilisateur puisse interagir avec votre site Web.
Si vous voulez charger automatiquement l'audio et que vous ne voulez pas que l'utilisateur interagisse d'abord avec le document, vous pouvez utiliser setTimeout.
setTimeout(() => {
document.getElementById('mySound').play();
}, 500)<audio id="mySound" src="sound.mp3"></audio>Le son commencera après 0,5 seconde.
Ajoutez un audio caché et jouez-le.
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);
}
new Audio('./file.mp3').play()
Solution assez simple si vous avez une balise HTML comme ci-dessous:
<audio id="myAudio" src="some_audio.mp3"></audio>
Utilisez simplement JavaScript pour le lire, comme suit:
document.getElementById('myAudio').play();
var song = new Audio();
song.src = 'file.mp3';
song.play();
J'ai eu quelques problèmes liés à objet de promesse audio renvoie et certains problèmes liés à l'interaction de l'utilisateur avec les sons, je finis par utiliser ce petit objet,
Je recommanderais d'implémenter les sons de lecture les plus proches de l'événement d'interaction utilisé par l'utilisateur.
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;
});
}
}
};
Et implémentez-le comme suit:
<button onclick="soundPlayer.play('https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3');">Play</button>
J'ai utilisé cette méthode pour jouer un son ...
var audioElement;
if(!audioElement) {
audioElement = document.createElement('audio');
audioElement.innerHTML = '<source src="' + '/audio/sound.mp3'+ '" type="audio/mpeg" />'
}
audioElement.play();
si vous voulez lire votre audio à chaque fois que la page est ouverte, procédez comme suit.
<script>
function playMusic(){
music.play();
}
</script>
<html>
<audio id="music" loop src="sounds/music.wav" autoplay> </audio>
</html>et appelez ce playMusic () chaque fois que vous avez besoin dans votre code de jeu.
Vous pouvez utiliser l'API Web Audio pour jouer des sons. Il y a pas mal de bibliothèques audio comme howler.js, soundjs, etc. Si vous ne vous souciez pas des anciens navigateurs, vous pouvez également vérifier http://musquitojs.com/ . Il fournit une API simple pour créer et jouer des sons.
Par exemple, pour jouer un son, tout ce que vous avez à faire est.
import $buzz from 'musquito';
const buzz = $buzz('gunfire.mp3');
buzz.play();
La bibliothèque prend également en charge les sprites audio.
Il suffit d'utiliser ceci:
<video controls="" autoplay="" name="media"><source src="Sound URL Here" type="audio/mpeg" /></video>
Ou, pour simplifier:
<video controls="" autoplay="" name="media">
<source src="Sound URL Here" type="audio/mpeg" />
</video>
Échantillon:
<video controls="" autoplay="" name="media">
<source src="https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3" type="audio/mpeg">
</video>N'A PAS IDEA si cela fonctionne sur d'autres navigateurs que Chrome 73 !!
Voici quelques-uns des JS avec lesquels j'ai travaillé sur un projet d'IA pour bébés. J'espère que cela pourra vous aider.
<!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>