Odtwarzanie dźwięku za pomocą Javascript?

To proste, wystarczy pobrać element audio i wywołać metodę play():

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

Zobacz ten przykład: http://www.storiesinflight.com/html5/audio.html

Ta strona odkrywa kilka innych fajnych rzeczy, które możesz zrobić, takich jak load(), pause(), i kilka innych właściwości elementu audio.

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

SoundManager 2 zapewnia łatwy w użyciu interfejs API, który umożliwia odtwarzanie dźwięku w dowolnej nowoczesnej przeglądarce, w tym IE 6+. Jeśli przeglądarka nie obsługuje HTML5, otrzymuje pomoc z Flasha. Jeśli chcesz HTML5 i nie ma Flasha, jest do tego ustawienie preferFlash=false

Obsługuje 100% flash-free audio na iPad, iPhone (iOS4) i inne urządzenia obsługujące HTML5 + przeglądarki

Użycie jest tak proste as:

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

Oto demo tego w akcji: http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/

To dość stare pytanie, ale chcę dodać kilka przydatnych informacji. W temacie starter wspomniał, że jest "making a game". Więc dla wszystkich, którzy potrzebują dźwięku do tworzenia gier, jest lepszy wybór niż tylko znacznik <audio> lub HTMLAudioElement. Myślę, że powinieneś rozważyć użycie Web Audio API :

Podczas gdy dźwięk w Internecie nie wymaga już wtyczki, tag audio przynosi znaczące ograniczenia dla wdrażania wyrafinowanych gier i aplikacji interaktywnych. The Web Audio API to wysokiej klasy API JavaScript do przetwarzania i syntezy dźwięku w aplikacjach internetowych. Celem tego API jest uwzględnienie możliwości występujących w nowoczesnych silnikach audio gier oraz niektórych zadań miksowania, przetwarzania i filtrowania, które można znaleźć w nowoczesnych aplikacjach do produkcji dźwięku na pulpicie.

Easy with Jquery

// set audio tags with no preload

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

// Dodaj jquery do wczytania

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

/ / napisz metody odtwarzania i zatrzymywania

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

/ / zdecyduj jak sterować dźwiękiem

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

EDIT

Aby odpowiedzieć na pytanie @stomy, oto jak wykorzystałbyś to podejście do odtwarzania listy odtwarzania :

Ustaw swoje utwory w obiekcie:

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

Użyj funkcji wyzwalania i odtwarzania jako przed:

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

Załaduj pierwszy utwór dynamicznie:

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

Zresetuj źródło dźwięku do następnego utworu na liście odtwarzania po zakończeniu bieżącego utworu:

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

Zobacz tutaj aby zobaczyć przykład tego kodu w akcji.

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

Dodaj Ukryty dźwięk i odtwarzaj go.

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

Całkiem proste rozwiązanie jeśli masz znacznik HTML jak poniżej:

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

Po prostu użyj JavaScript, aby go odtworzyć, w ten sposób:

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

Jeśli pojawi się następujący błąd:

Uncaught (in promise) DOMException: play() nie powiodło się, ponieważ użytkownik najpierw nie wszedł w interakcję z dokumentem.

Oznacza to, że użytkownik musi najpierw wejść w interakcję z witryną (zgodnie z Komunikatem o błędzie). W tym przypadku musisz użyć click lub innego słuchacza zdarzeń, aby użytkownik mógł wchodzić w interakcję z Twoją witryną.

Jeśli chcesz automatycznie załadować dźwięk i nie chcesz, aby użytkownik wchodził w interakcję z dokumentem po pierwsze, możesz użyć setTimeout.

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

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

Dźwięk rozpocznie się po 0,5 sekundy.

Użyłem tej metody do odtworzenia dźwięku...

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

Jeśli chcesz odtwarzać dźwięk po otwarciu strony, zrób tak.

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

I nazywaj to playMusic (), gdy tylko potrzebujesz kodu do gry.

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

Możesz użyć Web Audio API do odtwarzania dźwięków. Istnieje sporo bibliotek audio, takich jak wyjec.js, soundjs itp. Jeśli nie martwisz się starymi przeglądarkami, możesz również sprawdzić http://musquitojs.com / . zapewnia proste API do tworzenia i odtwarzania dźwięków.

import $buzz from 'musquito';

const buzz = $buzz('gunfire.mp3');

buzz.play();

Biblioteka obsługuje również Sprity Audio.