stop - Reproducción de audio con Javascript?

insertar audio mp3 en html

Question

Estoy haciendo un juego con HTML5 y Javascript.

¿Cómo puedo reproducir el audio del juego a través de Javascript?

Answer 1

Añadir un audio oculto y reproducirlo.

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);
}

Answer 2

Es fácil, solo obtenga su elemento de audio y llame al método play() :

document.getElementById(''yourAudioTag'').play();

Echa un vistazo a este ejemplo: http://www.storiesinflight.com/html5/audio.html

Este sitio descubre algunas de las otras cosas interesantes que puede hacer, como load() , pause() y algunas otras propiedades del elemento de audio .

Answer 3

Esta es una pregunta bastante antigua, pero quiero agregar información útil. El tema inicial ha mencionado que está "making a game" . Así que para todos los que necesitan audio para el desarrollo de juegos, hay una mejor opción que solo una etiqueta <audio> o un HTMLAudioElement . Creo que deberías considerar el uso de la API de audio web :

Si bien el audio en la web ya no requiere un complemento, la etiqueta de audio trae importantes limitaciones para implementar juegos sofisticados y aplicaciones interactivas. La Web Audio API es una API de JavaScript de alto nivel para procesar y sintetizar audio en aplicaciones web. El objetivo de esta API es incluir las capacidades que se encuentran en los motores de audio de juegos modernos y algunas de las tareas de mezcla, procesamiento y filtrado que se encuentran en las aplicaciones modernas de producción de audio de escritorio.

Answer 4

Fácil con Jquery

// establecer etiquetas de audio sin precarga

<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>

// añadir jquery a la carga

$(".my_audio").trigger(''load'');

// escribir métodos para jugar y parar

function play_audio(task) {
if(task == ''play''){
$(".my_audio").trigger(''play'');
}
if(task == ''stop''){
$(".my_audio").trigger(''pause'');
$(".my_audio").prop("currentTime",0);
}
}

// decide como controlar el audio

<button onclick="play_audio(''play'')">PLAY</button>
<button onclick="play_audio(''stop'')">STOP</button>

EDITAR

Para abordar la pregunta de @stomy, aquí es cómo utilizarías este enfoque para reproducir una lista de reproducción :

Coloca tus canciones en un objeto:

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''
}

Usa las funciones de disparar y jugar como antes:

$(".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);
}
}

Carga la primera canción dinámicamente:

keys = Object.keys(playlist);
$(''.my_audio'').append("<source id=''sound_src'' src=" + playlist[keys[0]] + " type=''audio/mpeg''>");

Restablece la fuente de audio a la siguiente canción en la lista de reproducción, cuando la canción actual termina:

count = 0;
$(''.my_audio'').on(''ended'', function() {
count++;
$("#sound_src").attr("src", playlist[keys[count]])[0];
$(".my_audio").trigger(''load'');
play_audio(''play'');
});

Vea here un ejemplo de este código en acción.

Answer 5

Puedes usar la Web Audio API para reproducir sonidos. Hay bastantes bibliotecas de audio como howler.js, soundjs, etc. Si no te preocupas por los navegadores antiguos, también puedes consultar musquitojs.com . Proporciona una API simple para crear y reproducir sonidos.

Por ejemplo, para reproducir un sonido todo lo que tienes que hacer es.

import $buzz from ''musquito'';
const buzz = $buzz(''gunfire.mp3'');
buzz.play();

La biblioteca también soporta Audio Sprites.

Answer 6

Si está recibiendo el siguiente error:

Sin captura (en promesa) DOMException: play () falló porque el usuario no interactuó con el documento primero.

Eso significa que el usuario debe interactuar con el sitio web primero (como lo indica el mensaje de error). En este caso, debe usar click o simplemente otro detector de eventos, para que el usuario pueda interactuar con su sitio web.

Si desea cargar automáticamente el audio y no quiere que el usuario interactúe con el documento primero, puede usar setTimeout .

setTimeout(() => {
document.getElementById(''mySound'').play();
}, 500)

<audio id="mySound" src="sound.mp3"></audio>

El sonido empezará después de 0.5 segundos.

Answer 7

Si no quieres meterte con elementos HTML:

var audio = new Audio(''audio_file.mp3'');
audio.play();

Esto utiliza la interfaz HTMLAudioElement , que reproduce el audio de la misma manera que el elemento <audio> .

Si necesita más funcionalidad, usé la biblioteca howler.js y la encontré simple y útil.

Answer 8

Solución bastante simple si tiene una etiqueta HTML como la siguiente:

<audio id="myAudio" src="some_audio.mp3"></audio>

Solo usa JavaScript para jugar, así:

document.getElementById(''myAudio'').play();

Answer 9

Utilicé este método para reproducir un sonido ...

var audioElement;
if(!audioElement) {
audioElement = document.createElement(''audio'');
audioElement.innerHTML = ''<source src="'' + ''/audio/sound.mp3''+ ''" type="audio/mpeg" />''
}
audioElement.play();

Answer 10

si quieres reproducir tu audio cada vez que se abre la página, hazlo así.

<script>
function playMusic(){
music.play();
}
</script>
<html>
<audio id="music" loop src="sounds/music.wav" autoplay> </audio>
</html>

y llama a este playMusic () cuando lo necesites en tu código de juego.

Answer 11

http://www.schillmania.com/projects/soundmanager2/

SoundManager 2 ofrece una API fácil de usar que permite reproducir el sonido en cualquier navegador moderno, incluido IE 6+. Si el navegador no es compatible con HTML5, entonces recibe ayuda de flash. Si desea estrictamente HTML5 y no flash, hay una configuración para eso, preferFlash=false

Admite audio 100% sin flash en iPad, iPhone (iOS4) y otros dispositivos habilitados para HTML5 + navegadores

El uso es tan simple como:

<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>

Aquí hay una demostración de ello en acción: http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/

Answer 12

new Audio(''./file.mp3'').play()

Answer 13

var song = new Audio();
song.src = ''file.mp3'';
song.play();