it-swarm.com.de

Audio mit Javascript abspielen?

Ich mache ein Spiel mit HTML5 und Javascript.

Wie kann ich Game-Audio über Javascript abspielen?

596
Ryan S.

Wenn Sie sich nicht mit HTML-Elementen anlegen möchten:

_var audio = new Audio('audio_file.mp3');
audio.play();
_
_var audio = new Audio('https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3');
audio.play();_

Dies verwendet die Schnittstelle HTMLAudioElement , die Audio auf dieselbe Weise wie das Element _<audio>_ wiedergibt .


Wenn Sie weitere Funktionen benötigen, habe ich die Bibliothek howler.js verwendet und für einfach und nützlich befunden.

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

Es ist ganz einfach, holen Sie sich einfach Ihr audio -Element und rufen Sie die play() -Methode auf:

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

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

Diese Site deckt einige der anderen coolen Dinge auf, die Sie tun können, z. B. load(), pause() und einige andere Eigenschaften des audio -Elements.

173
shanabus

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

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

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

Die Bedienung 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 ist eine Demo davon in Aktion: http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/

36
LordZardeck

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

Während Audio im Web kein Plugin mehr erfordert, bringt das Audio-Tag erhebliche Einschränkungen für die Implementierung anspruchsvoller Spiele und interaktiver Anwendungen mit sich. Die Web-Audio-API ist eine allgemeine JavaScript-API zum Verarbeiten und Synthetisieren von Audio in Webanwendungen. Das Ziel dieser API besteht darin, die Funktionen moderner Game-Audio-Engines und einige der Misch-, Verarbeitungs- und Filteraufgaben, die in modernen Desktop-Audio-Produktionsanwendungen enthalten sind, einzubeziehen.

28

Einfach mit JQuery

// Audio-Tags ohne Vorspannung 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>

// füge jquery zum Laden hinzu

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

// schreibe Methoden zum Spielen und Stoppen

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

// Entscheide, wie Audio gesteuert werden soll

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

EDIT

Um die Frage von @ stomy zu beantworten, gehen Sie folgendermaßen vor, um eine Wiedergabeliste abzuspielen:

Setze deine Songs in ein Objekt:

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 Trigger- und Wiedergabefunktionen wie zuvor:

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

Lädt das erste Lied 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 hier für ein Beispiel dieses Codes in Aktion.

20
Cybernetic

Wenn Sie die folgende Fehlermeldung erhalten:

Nicht abgefangene (in Aussicht gestellte) DOMException: play () ist fehlgeschlagen, weil der Benutzer nicht zuerst mit dem Dokument interagiert hat.

Das bedeutet, dass der Benutzer zuerst mit der Website interagieren muss (wie in der Fehlermeldung angegeben). In diesem Fall müssen Sie click oder nur einen anderen Ereignis-Listener verwenden, damit der Benutzer mit Ihrer Website interagieren kann.

Wenn Sie das Audio automatisch laden möchten und nicht möchten, dass der Benutzer zuerst mit dem Dokument interagiert, können Sie setTimeout verwenden.

setTimeout(() => {
  document.getElementById('mySound').play();
}, 500)
<audio id="mySound" src="sound.mp3"></audio>

Der Ton startet nach 0,5 Sekunden.

11
Reza Saadati

Füge ein verstecktes Audio hinzu und spiele es ab.

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);
}
11
Rey
new Audio('./file.mp3').play()
11
Maxmaxmaximus

Ziemlich einfache Lösung, wenn Sie ein HTML-Tag wie folgt haben:

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

Benutze einfach JavaScript, um es zu spielen:

document.getElementById('myAudio').play();
5
Ben Stafford
var song = new Audio();
song.src = 'file.mp3';
song.play();
4
mamadaliev

Ich hatte einige Probleme im Zusammenhang mit Audio-Versprechen-Objekt und einige Probleme im Zusammenhang mit der Benutzerinteraktion mit Sounds, die ich letztendlich mit diesem kleinen Objekt verwende.

Ich würde empfehlen, die Wiedergabetöne zu implementieren, die den Interaktionsereignissen am nächsten kommen, die der Benutzer verwendet.

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

Und implementieren Sie es wie folgt:

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

Ich habe diese Methode benutzt, um einen Sound abzuspielen ...

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

wenn Sie Ihr Audio immer dann abspielen möchten, wenn die Seite geöffnet wird, gehen Sie folgendermaßen vor.

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

und rufe dieses playMusic () auf, wann immer du es in deinem Spielcode brauchst.

2

Sie können die Web-Audio-API zum Abspielen von Sounds verwenden. Es gibt einige Audiobibliotheken wie howler.js, soundjs usw. Wenn Sie sich nicht um alte Browser kümmern, können Sie auch http://musquitojs.com/ . Es bietet eine einfache API zum Erstellen und Abspielen von Sounds.

Um zum Beispiel einen Sound abzuspielen, müssen Sie nur noch etwas tun.

import $buzz from 'musquito';

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

buzz.play();

Die Bibliothek unterstützt auch Audio-Sprites.

1
VJAI

Benutze einfach folgendes:

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

Oder, um es einfacher zu machen:

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

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

</video>

Stichprobe:

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

Verwenden Sie NO IDEA, wenn dies in anderen Browsern als Chrome 73 funktioniert !!

0
I.M.SMART

Dies ist ein JS, mit dem ich auf ein Baby-KI-Projekt gekommen bin, mit dem ich arbeite. ich hoffe das kann dir helfen.

<!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>
0
Urihel Coleman