Jak odtwarzać dźwięk?

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. Web Audio API jest wysokopoziomowym 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.

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.

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

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

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

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

Miałem pewne problemy związane z Audio promise object returns i niektóre problemy związane z interakcją użytkownika z dźwiękami kończę używając tego małego obiektu,

Zalecałbym zaimplementowanie dźwięków odtwarzania, których użytkownik używa najbliżej zdarzenia interakcji.

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

I wdrożyć go w następujący sposób:

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

Z wymogami bezpieczeństwa, że użytkownik musi wchodzić w interakcję ze stroną internetową, aby dźwięk był dozwolony, tak to robię, na podstawie czytania wielu artykułów, w tym na tej stronie

1. Zdefiniuj wymagane pliki audio w Twoim html
2. Uruchom grę przyciskiem onclick
3. Po kliknięciu przycisku Odtwórz i wstrzymaj wszystkie paski plików audio, które chcesz odtworzyć na początku

Ponieważ wszystkie pliki audio zostały "odtworzone" na tym samym OnClick, można teraz grać w nich w każdej chwili w grze bez ograniczeń

Zauważ, że dla najlepszej kompatybilności nie używaj plików wav, MS ich nie obsługuje

Użyj mp3 i ogg, który obejmuje wszystkie urządzenia

Przykład:

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

Powtórz w razie potrzeby dla wszystkich dźwięków w grze

Wtedy:

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

Powtórz w razie potrzeby, z wyjątkiem nie wstrzymuj dźwięku, który chcesz usłyszeć, gdy gra się rozpocznie

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.

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.

Po prostu użyj tego:

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

Lub, dla uproszczenia:

<video controls="" autoplay="" name="media">

<source src="Sound URL Here" type="audio/mpeg" />

</video>

Próbka:

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

Nie mam pojęcia, czy to działa na innych przeglądarkach niż Chrome 73!!

To jakiś JS, który wymyśliłem w projekcie AI dla dzieci, z którym pracuję. mam nadzieję, że to ci pomoże.

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

Miałem pewne problemy z odtwarzaniem dźwięku, zwłaszcza, że Chrome zaktualizował, że użytkownik musi najpierw wejść w interakcję z dokumentem.

Jednak w prawie wszystkich rozwiązaniach, które znalazłem jest to, że kod JS musi aktywnie ustawiać słuchaczy (np. kliknięcia przycisków), aby odbierać zdarzenia użytkownika w celu odtworzenia dźwięku.

W moim przypadku chciałem tylko, aby moja gra grała w BGM, jak tylko gracz wchodzi w interakcję z nim, więc zrobiłem sobie prostego słuchacza, który sprawdza, czy strona jest interakcja czy nie.

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 )

Oto rozwiązanie na rok 2020, gdy widzisz Błąd:

[Błąd] nieobsługiwana obietnica odrzucenie: NotSupportedError: operacja nie jest obsługiwana. (funkcja anonimowa) rejectPromise play (funkcja anonimowa) (testaudio.html: 96) dispatch (jquery-3.4.1./ min.js: 2: 42577)

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

Nie bądź sprytny i myśl, że ooh to stara szkoła oclick, po prostu przeniosę to w dół strony do mojego jQuery lub mojego zewnętrznego pliku JavaScript. Nie. To musi być onclick.

Jeśli chcesz mieć możliwość odtwarzania dźwięku nawet wtedy, gdy karta przeglądarki nie jest aktualnie wybrana, musisz załadować zasób audio przy ładowaniu strony.

Like so:

var audio = new Audio('audio/path.mp3');

function playSound(){
    audio.play();
}

Zobacz to pytanie po więcej szczegółów