Si no quieres meterte con elementos HTML:

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

 function play() { var audio = new Audio('https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3'); audio.play(); }

 <button onclick="play()">Play Audio</button>

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

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

 <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/cc0-audio/t-rex-roar.mp3'], volume: 0.5, onend: function () { alert('Finished!'); } }); sound.play() </script>

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>

// agregar jquery para cargar

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

// escribir métodos para reproducir 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 cómo controlar el audio

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

EDITAR

Para abordar la pregunta de @stomy, así es como usaría 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' }

Utilice las funciones de activación y reproducción 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); } }

Cargue la primera canción dinámicamente:

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

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

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

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

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

Si bien el audio en la web ya no requiere un complemento, la etiqueta de audio presenta limitaciones significativas 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 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.

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

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

Admite audio 100 % sin flash en iPad, iPhone (iOS4) y otros dispositivos y navegadores compatibles con HTML5

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 en acción: http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/

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

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

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

Puede usar Web Audio API para reproducir sonidos. Existen bastantes bibliotecas de audio, como howler.js, soundjs, etc. Si no te preocupan los navegadores antiguos, también puedes consultar http://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 es compatible con Audio Sprites.

Si recibe el siguiente error:

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

Eso significa que el usuario debe interactuar primero con el sitio web (como dice 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 primero con el documento, puede usar setTimeout .

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

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

El sonido comenzará después de 0,5 segundos.

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

Agregue un audio oculto y reprodúzcalo.

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

si desea reproducir su audio cada vez que se abre la página, haga lo siguiente.

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

y llame a este playMusic() cuando lo necesite en su código de juego.

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

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

Solo usa JavaScript para reproducirlo, así:

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

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

Usé 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();

Este es un JS que se me ocurrió en un proyecto de IA para bebés con el que estoy trabajando. Espero que esto pueda ayudarte.

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

Tuve algunos problemas relacionados con la devolución de objetos de promesa de audio y algunos problemas relacionados con la interacción del usuario con los sonidos. Terminé usando este pequeño objeto,

Recomendaría implementar los sonidos de reproducción lo más cerca posible del evento de interacción que está usando el usuario.

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

E implementarlo de la siguiente manera:

 <button onclick="soundPlayer.play('https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3');">Play</button>

Solo usa esto:

 <video controls="" autoplay="" name="media"><source src="Sound URL Here" type="audio/mpeg" /></video>

O, para hacerlo más simple:

 <video controls="" autoplay="" name="media"> <source src="Sound URL Here" type="audio/mpeg" /> </video>

Muestra:

 <video controls="" autoplay="" name="media"> <source src="https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3" type="audio/mpeg"> </video>

¡NO TENGO IDEA si esto funciona en otros navegadores que no sean Chrome 73!

Tuve algunos problemas con la reproducción de audio, especialmente desde que Chrome actualizó que el usuario debe interactuar primero con el documento.

Sin embargo, en casi todas las soluciones que encontré es que el código JS tiene que configurar activamente a los oyentes (por ejemplo, hacer clic en un botón) para recibir eventos de usuario para reproducir el audio.

En mi caso, solo quería que mi juego reprodujera BGM tan pronto como el jugador interactúe con él, así que me convertí en un simple oyente que sigue comprobando si la página web está interactuando o no.

 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 )

Aquí hay una solución para el año 2020 cuando ve el error:

[Error] Rechazo de promesa no manejado: NotSupportedError: la operación no es compatible. (función anónima) rechazarPromise reproducir (función anónima) (testaudio.html:96) despacho (jquery-3.4.1.min.js:2:42577)

 <div onclick="new Audio('/assets/test.mp3').play()">aaa</div>

No sea astuto y piense ooh, eso es un oclick de la vieja escuela, simplemente lo moveré hacia abajo en la página a mi jQuery o mi archivo JavaScript externo. No. Tiene que ser un onclick .

Con los requisitos de seguridad de que un usuario debe interactuar con una página web para que se permita el audio, así es como lo hago, según la lectura de muchos artículos, incluso en este sitio.

1. Defina los archivos de audio requeridos en su html
2. Tener un botón de inicio de juego con un clic
3. Cuando se hace clic en el botón, reproduzca y pause TODOS los archivos de audio excepto el que desea reproducir al principio

Debido a que todos los archivos de audio se han "reproducido" en el mismo OnClick, ahora puede reproducirlos en cualquier momento del juego sin restricciones.

Tenga en cuenta que para una mejor compatibilidad, no use archivos wav, MS no los admite

Usa mp3 y ogg, eso cubre todos los dispositivos

Ejemplo:

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

repita según sea necesario para todo el audio en el juego

Luego:

 document.getElementById("welcome").play(); document.getElementById("welcome").pause();

repita según sea necesario, excepto que no pause el audio que desea escuchar cuando comience el juego

En reaccionar, puedes usar 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>

Si desea poder reproducir el sonido incluso cuando la pestaña del navegador no está seleccionada actualmente, debe cargar el recurso de audio en la carga de la página.

Al igual que:

 var audio = new Audio('audio/path.mp3'); function playSound(){ audio.play(); }

Ver esta pregunta para más detalles