Odtwarzanie dźwięku za pomocą Javascript?

692

Tworzę grę z HTML5 i Javascript.

Jak mogę odtwarzać dźwięk z gry za pomocą Javascript?

Ryan S.
źródło
9
Ponieważ jest to HTML5, jest <audio>. Ten element będzie miał odpowiednie haki JS do „odtwarzania”, „pauzy” itp.
Marc B
1
@Marc Cóż, czy możesz podać informacje na temat tych haków?
Ryan S.,
14
Założę się, że zastanawiasz się, gdzie jest dokumentacja dla wszystkich metod audio: stackoverflow.com/questions/4589451/...
Bryan Downing

Odpowiedzi:

1333

Jeśli nie chcesz zadzierać z elementami HTML:

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

Korzysta z HTMLAudioElementinterfejsu, który odtwarza dźwięk w taki sam sposób jak <audio>element .


Jeśli potrzebujesz więcej funkcji, skorzystałem z biblioteki howler.js i uznałem ją za prostą i przydatną.

Uri
źródło
9
Ta metoda działa w przypadku odtwarzania plików mp3, ale nie w przypadku plików wav. Czy jest jakiś sposób na odtwarzanie plików WAV?
user781486
12
@ user3293156 Ta metoda obsługuje te same formaty co HTML5 <audio>. Wikipedia ma tabelę kompatybilności formatu audio . new Audio()może odtwarzać pliki WAV we wszystkich przeglądarkach oprócz Internet Explorera.
Rory O'Kane
283
@ RoryO'Kane, aby każdy mógł odtwarzać format audio Microsoft poza Microsoft? lol
Dave Cousineau
10
Kilka zastrzeżeń: (1) Firefox nie odtwarza mp3 . Zamiast tego potrzebujesz pliku ogg. (2) Safari / iOS nie będzie odtwarzany, jeśli udostępniasz zawartość przez https . Musisz mieć ważny certyfikat.
Peter
9
Zwróć uwagę, że od kwietnia 2018 r. W Chrome nie będą odtwarzane pliki audio, chyba że użytkownik kliknie przynajmniej raz w dokumencie. Zobacz tutaj .
Nils Lindemann
181

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

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

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

Ta strona odkrywa niektóre inne fajne rzeczy, które możesz zrobić, takie jakload() , pause()i kilka innych właściwości audioelementu.

shanabus
źródło
38

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 od Flasha. Jeśli chcesz ściśle korzystać z HTML5 i bez flashowania, możesz to ustawić,preferFlash=false

Obsługuje w 100% dźwięk bez Flasha na iPadzie, iPhonie (iOS4) i innych urządzeniach z obsługą HTML5 + przeglądarkach

Użycie jest tak proste, jak:

<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 jego demo w akcji: http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/

LordZardeck
źródło
3
Ogólnie, kiedy podajesz link na tej stronie, podajesz informacje z linku w swoim poście. Odradza się po prostu zamieszczenie prostego linku i powiedzenie „kliknij to”.
Ryan S.,
7
Przepraszam, pomyślałem, że strona sama się wyjaśni. Zmienię go wtedy
LordZardeck,
32

To dość stare pytanie, ale chcę dodać przydatne informacje. Autor tematu wspomniał, że jest "making a game". Tak więc dla każdego, kto potrzebuje dźwięku do tworzenia gier, jest lepszy wybór niż tylko <audio>tag lub an HTMLAudioElement. Myślę, że powinieneś rozważyć użycie Web Audio API :

Podczas gdy dźwięk w Internecie nie wymaga już wtyczki, znacznik audio wprowadza znaczne ograniczenia w zakresie wdrażania wyrafinowanych gier i aplikacji interaktywnych. Web Audio API to interfejs API JavaScript wysokiego poziomu do przetwarzania i syntezy dźwięku w aplikacjach internetowych. Celem tego interfejsu API jest uwzględnienie możliwości obecnych we współczesnych silnikach audio gier oraz niektórych zadań miksowania, przetwarzania i filtrowania, które występują we współczesnych aplikacjach do produkcji audio na komputery stacjonarne.

Konstantin Smolianin
źródło
22

Łatwo dzięki Jquery

// ustaw tagi audio bez wstępnego ładowania

<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 załadowania

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

// napisz metody grania 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 kontrolować dźwięk

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

EDYTOWAĆ

Aby odpowiedzieć na pytanie @ stomy, oto jak możesz użyć tego podejścia do odtwarzania listy odtwarzania :

Ustaw swoje piosenki 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 jak poprzednio:

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

Dynamicznie ładuj pierwszą piosenkę:

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, gdy zakończy się bieżący utwór:

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 przykład tego kodu w akcji.

Cybernetyczny
źródło
Odtwarza wszystkie tagi audio jednocześnie z class = "my_audio". Jak grasz jeden po drugim (na liście odtwarzania)?
stomy,
@stomy opublikowałeś to jako własne pytanie na StackOverflow? Jeśli to zrobisz, daj mi znać. Mogę ci w tym pomóc. w przeciwnym razie zaoferuję to - możesz (po rozpoczęciu odtwarzania utworu) odsłuchiwać endedwydarzenie, które ma być emitowane i rozpocząć następny plik audio na liście (prawdopodobnie śledzisz albo w DOM, JS itp.) ). developer.mozilla.org/en-US/docs/Web/Events/ended
Sgnl
@stomy sprawdź EDYCJĘ w mojej odpowiedzi, aby utworzyć listę odtwarzania, która odtwarza utwory kolejno.
Cybernetyczny
15

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);
}
Rey
źródło
14

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

Nieprzechwycony (w obietnicy) DOMException: play () nie powiodło się, ponieważ użytkownik nie wchodził najpierw w interakcję z dokumentem.

Oznacza to, że użytkownik musi najpierw wejść w interakcję ze stroną internetową (jak mówi komunikat o błędzie). W takim przypadku musisz użyć clicklub tylko innego detektora zdarzeń, aby użytkownik mógł wchodzić w interakcje z witryną.

Jeśli chcesz automatycznie załadować dźwięk i nie chcesz, aby użytkownik najpierw wchodził w interakcję z dokumentem, 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.

Reza Saadati
źródło
To nie działa Nie w Chrome. Nigdy więcej.
Arfeo
11
new Audio('./file.mp3').play()
Maxmaxmaximus
źródło
5
var song = new Audio();
song.src = 'file.mp3';
song.play();
mamadaliev
źródło
łatwy i działający kod.
Arsh Khan
5

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

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

Aby go odtworzyć, użyj JavaScript:

document.getElementById('myAudio').play();
Ben Stafford
źródło
Czy chciałeś użyć </a> lub </audio>. Po prostu ciekawy.
Cooper
Użyłem tagu <audio>.
Ben Stafford,
1
Ben, twój przykład miał niepoprawny tag zamykający, dlatego @Cooper zadał to pytanie. Zredagowałem odpowiedź z poprawnym tagiem zamykającym.
Sgnl
4

Miałem pewne problemy związane ze zwrotami obiektów obietnicy audio i pewne problemy związane z interakcją użytkownika z dźwiękami, które w końcu używam tego małego obiektu,

Polecam zaimplementować dźwięki odtwarzania najbliższe zdarzeniu interakcji, z którego korzysta użytkownik.

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 zaimplementuj 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>
talsibony
źródło
Nie działa na Safari, jeśli uruchomię autoodtwarzanie z JS.
maki10
1
@ maki10 Cześć, przetestowałem go na safari w wersji 12.0.3 (14606.4.5) i działa tutaj: jsfiddle.net/xf5zyv4q/5
talsibony
Działa również na safari mobilnym IOS 12
talsibony
Aktualizuję link do mojego problemu jsfiddle.net/6431mfb5 . Dla mnie gra automatyczna działa tylko za pierwszym razem w safari i nowszych.
maki10
@ maki10, ponieważ wywołujesz go bez interakcji użytkownika, autoodtwarzanie nie będzie działać bez interakcji użytkownika, takich jak kliknięcie, usuń ostatni wiersz: soundPlayer.play (' interactive-examples.mdn.mozilla.net/media/examples/... );
talsibony
3

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();
Bilal Soomro
źródło
3

W związku z wymogami bezpieczeństwa dotyczącymi interakcji audio ze stroną internetową, aby dźwięk był dozwolony, robię to w oparciu o czytanie wielu artykułów, w tym na tej stronie

  1. Zdefiniuj wymagane pliki audio w swoim html
  2. Uruchom przycisk gry z kliknięciem
  3. Po kliknięciu przycisku odtwarzaj i wstrzymuj WSZYSTKO pasek plików audio, który chcesz odtworzyć na początku

Ponieważ wszystkie pliki audio zostały „odtworzone” na tym samym OnClick, możesz teraz odtwarzać je w dowolnym momencie 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>

w razie potrzeby powtarzaj wszystkie dźwięki w grze

Następnie:

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

powtarzaj w razie potrzeby, z wyjątkiem tego, że nie wstrzymuj dźwięku, który chcesz usłyszeć na początku gry

Phil Allen
źródło
2

jeśli chcesz odtwarzać dźwięk przy każdym otwarciu strony, zrób tak.

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

i wywoływaj to playMusic (), ilekroć potrzebujesz w kodzie gry.

Suhani Mendapara
źródło
1

Możesz użyć interfejsu API Web Audio do odtwarzania dźwięków. Istnieje całkiem sporo bibliotek audio, takich jak howler.js, soundjs itp. Jeśli nie martwisz się o stare przeglądarki, możesz także sprawdzić na http://musquitojs.com/ . Zapewnia prosty interfejs API do tworzenia i odtwarzania dźwięków.

Na przykład, aby odtworzyć dźwięk, wystarczy.

import $buzz from 'musquito';

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

buzz.play();

Biblioteka obsługuje również duszki audio.

VJAI
źródło
0

To jest JS, nad którym pracowałem nad małym projektem AI. mam nadzieję, że to może ci pomóc.

<!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>
Urihel Coleman
źródło
0

Po prostu użyj tego:

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

Lub, aby uprościć:

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

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

</video>

Próba:

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

NIE MAJ POMYSŁU, jeśli działa to w innych przeglądarkach innych niż Chrome 73 !!

JESTEM BYSTRY
źródło
To łatwa, czysta odpowiedź. W ogóle nie ma jquery !!
IMSMART
0

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, kod JS musi aktywnie ustawiać detektory (np. Kliknięcia przycisków) w celu odbierania zdarzeń użytkownika w celu odtworzenia dźwięku.

W moim przypadku chciałem, aby moja gra grała w BGM, gdy tylko gracz wejdzie w interakcję, więc postanowiłem, że jestem prostym słuchaczem, który sprawdza, czy strona internetowa jest obsługiwana, 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 )
Danny
źródło
0

Oto rozwiązanie na rok 2020, kiedy pojawia się błąd:

[Błąd] Nieobsługiwane odrzucenie obietnicy: NotSupportedError: Operacja nie jest obsługiwana. (funkcja anonimowa) odrzucanie Odtwórz odtwarzanie (funkcja anonimowa) (testaudio.html: 96) wysyłka (jquery-3.4.1.min.js: 2: 42577)


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

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

William Entriken
źródło