Wie kann man Audio abspielen?

Question

Ich mache ein Spiel mit HTML5 und JavaScript.

Wie kann ich den Ton eines Spiels über JavaScript abspielen?

Answer 1

Wenn Sie nicht mit HTML-Elementen herumhantieren wollen:

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>

Dabei wird die HTMLAudioElement Schnittstelle, die Audio auf die gleiche Weise abspielt wie die <audio> Element .

---

Wenn Sie mehr Funktionalität benötigen, habe ich die heuler.js Bibliothek und fand sie einfach und nützlich.

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

Answer 2

Es ist ganz einfach: Holen Sie sich Ihre audio play() Methode:

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

Sehen Sie sich dieses Beispiel an: http://www.storiesinflight.com/html5/audio.html

Diese Seite deckt einige der anderen coolen Dinge auf, die Sie tun können, wie zum Beispiel load() , pause() und einige andere Eigenschaften des audio Element.

Answer 3

Diese Frage ist schon ziemlich alt, aber ich möchte einige nützliche Informationen hinzufügen. Der Themenstarter hat erwähnt, dass er "making a game" . Für alle, die Audio für die Spieleentwicklung benötigen, gibt es also eine bessere Wahl als nur eine <audio> Tag oder ein HTMLAudioElement . Ich denke, Sie sollten die Verwendung des Web-Audio-API :

Während für Audio im Web kein Plugin mehr erforderlich ist, bringt das Audio-Tag erhebliche Einschränkungen für die Implementierung anspruchsvoller Spiele und interaktiver Anwendungen mit sich. Die Web-Audio-API ist eine High-Level-JavaScript-API für die Verarbeitung und Synthese von Audio in Webanwendungen. Das Ziel dieser API ist es, die Fähigkeiten moderner Spiele-Audio-Engines und einige der Misch-, Verarbeitungs- und Filteraufgaben, die in modernen Desktop-Audioproduktionsanwendungen zu finden sind, zu integrieren.

Answer 4

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

SoundManager 2 bietet eine einfach zu bedienende API, mit der Sound in jedem modernen Browser, einschließlich IE 6+, abgespielt werden kann. Wenn der Browser kein HTML5 unterstützt, wird er von Flash unterstützt. Wenn Sie strikt HTML5 und kein Flash wollen, gibt es dafür eine Einstellung, preferFlash=false

Es unterstützt 100% Flash-freies Audio auf iPad, iPhone (iOS4) und anderen HTML5-fähigen Geräten und Browsern

Die Benutzung ist so einfach wie:

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

Hier sehen Sie eine Demo in Aktion: http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/

Answer 5

Einfach mit Jquery

// Audio-Tags ohne Vorladen setzen

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

// jquery zum Laden hinzufügen

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

// Methoden zum Abspielen und Anhalten schreiben

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

// entscheiden Sie, wie Sie Audio steuern wollen

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

EDIT

Um auf die Frage von @stomy einzugehen, würden Sie mit diesem Ansatz eine Wiedergabeliste :

Legen Sie Ihre Lieder in einem Objekt ab:

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

Verwenden Sie die Auslöse- und Abspielfunktionen wie bisher:

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

Laden Sie den ersten Song dynamisch:

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

Setzt die Audioquelle auf den nächsten Titel in der Wiedergabeliste zurück, wenn der aktuelle Titel endet:

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

Siehe aquí um ein Beispiel für diesen Code in Aktion zu sehen.