• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Wie beende ich das Abspielen der Audiodatei (Function) in Js?

X

xeno

New member
Code: 
function level1() { 
            if(antwort == 'hut' || antwort == 'enter the hut' || antwort == 'into the hut'){
                out += "The room is shattered and empty. Seems like there's nothing interesting. <br> By the way what's your sex?";
                level += 1;
                // Audio Firsttrack Loop
                myAudio = new Audio('/Users/lukaspixner/Documents/Programmieren/Xenoland/Xenoland/Source/Xenovania_1.wav'); 
                myAudio.addEventListener('ended', function playmusic() {
                    this.currentTime = 0;
                    this.play();
                    }, false);
                        myAudio.play();

Ich will das das Audiofile ab level4 stoppt, hat da wer einen Tipp?
Ich versuch das schon seit Stunden und komm nicht weiter ..

Danke Danke Danke!
greetz

xeno
 
Du kannst auch den Audio-Prototype erweitern, dann kannst du die Wiedergabe mittels myAudio.stop() stoppen:
Code: 
Audio.prototype.stop = function(){
  this.pause();
  this.currentTime = 0.0;
}

PS: du solltest dir von Vornherein angewöhnen, bei Vergleichen === statt == zu verwenden.
PPS: if(antwort == 'hut' || antwort == 'enter the hut' || antwort == 'into the hut'){ ist äußerst suboptimal - was ist, wenn jemand z.B. nur "enter hut" eingibt?
Besser und viel kürzer:
Code: 
var hut = /\bhut\b/i;
if(hut.exec(antwort) !== null){
  //...
 
Warum nicht die web audio api nutzen?
Für sowas ist die doch wie geschaffen.

Code: 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>null</title>
  </head>

  <body>
    <button class="play">Play</button>
    <button class="stop">Stop</button>   
  </body>
<script>



var audioCtx = new (window.AudioContext || window.webkitAudioContext)();//Erzeuge ein web Audio Objekt
var source; // globale fuer BufferSource Objekt

var play = document.querySelector('.play');
var stop = document.querySelector('.stop');


function getData() {
  source = audioCtx.createBufferSource(); //erzeugen der BufferSource(der Playback finde in diesem Objekt statt)
  request = new XMLHttpRequest(); //holen der Daten via xhr

  request.open('GET', '/Users/lukaspixner/Documents/Programmieren/Xenoland/Xenoland/Source/Xenovania_1.wav', true);

  request.responseType = 'arraybuffer';

  request.onload = function() {
    var audioData = request.response;
    //decodeAudioData dekodiert, mp3, wav und ogg zu raw pcm 
    audioCtx.decodeAudioData(audioData, function(buffer) {
        var myBuffer = buffer;
        source.buffer = myBuffer;
        source.connect(audioCtx.destination);//verbinden zu den Lautsprechern
        source.loop = true; // spiele in loop
      },

      function(e){"Error with decoding audio data" + e.err});
  }

  request.send();
}


play.onclick = function() {
  getData();
  source.start(0);//Startet den Playback
  play.setAttribute('disabled', 'disabled');
}

stop.onclick = function() {
  source.stop(0);//stoppt den Playback
  play.removeAttribute('disabled');
}
  </script>
</html>
getestet mit FF.

Dann kannst du noch den Start und Endpunkt der Wiedergabe festlegen und die playbackRate verändern, die Lautstärke usw....
Mann kann auch mehre Dateien hintereinander uploaden und dekodieren... für Jingles gut, aber Achtung landet alles im RAM.

VG Xorg1990
 
mp3 ist ein tolles Format - und deutlich kleiner als WAV. Mittlerweile können auf dem PC alle aktuellen Browser das Format. Bei den Mobilgeräten bin ich mir nicht so sicher. Daher gehört zum Audio im Web immer (!) eine Prüfung auf verfügbare Unterstützung, welches Format und dann die Bereitstellung des jeweiligen Formates*. An mp3 würde ich nicht vorbei gehen - an ogg u. U. kommst noch nicht vorbei (für beide Format gibbet "Audacity").

Qualität ist so eine Sache - je nach Zielgruppe benötigst Du keine 320 kbit im mp3, weil sowas auf 'nem Handy über die externe Box eh BS klingt. Höher als 96 kbit musst Du nicht - tiefer als 64 solltest Du nicht. Damit hast Du ein wenig Spielraum. Je nach Umfang Deiner Audioarbeit ist nicht unwichtig, welche Sounds gut klingen können, welche müssen und welche vielleicht als 64er reichen. Bedenke: Alles ist Traffic! Demnach: Exzellente Vorarbeit hierbei ist alles. Tipp: Versioniere Deine Sounds ebenfalls (falls Du später doch noch was änderst)!

Solltest Du über Loops (Endlosschleife) nachdenken, so sei Dir versichert: Kein Browser kann es! Alle haben einen Aussetzer dazwischen. Je nach Browser dauert der mal (immer hörbar) bis zu 0,5 s. Eine Lösung, die auf allen Geräten auch funktioniert, gibt es nicht! (sonst freue ich mich über Hinweise)

Wichtig: Du kannst nicht einfach Audio-Events feuern. Wenn die Source belegt ist (weil schon Audio läuft), kannst Du kein weiteres File abspielen. Darum: Vor jedem play() dafür sorgen, dass nix mehr läuft!

Stop/Pause: Ich habe in meinem JavaScript alles fürs Audio in {} (also als Object). Hier dient schlichtweg ein flag als "läuft" bzw. "läuft nicht". Mein Audio setze ich mit pause() in den Ruhemodus. Ein erneutes play() startet wieder von vorn (!) - ist kein resume. ;)

* Formatbestimmung: Es gibt ja nun "new Audio("")" und damit kannst Du ganz einfach je Gerät erkennen, was die können:
Code: 
var myAudio = new Audio(""), ogg = '', mp3 = '', wav = '';
ogg = myAudio.canPlayType("audio/ogg");
mp3 = myAudio.canPlayType("audio/mpeg");
var canPlayOgg = ((ogg != "no") && (ogg != ""));
var canPlayMp3 = ((mp3 != "no") && (mp3 != ""));
var canPlayWav = ((wav != "no") && (wav != ""));

console.log(canPlayOgg . ' : ' . canPlayMp3 . ' : ' . canPlayWav);

Preload bei Audio: Das funktioniert identisch wie bei bspw. Bildern - und dringend empfohlen, damit Trigger-Sounds auch "da" sind, wenn getriggert (klick, touch etc.) wird:
_obj ist bspw. jetzt mein {} (Gesamtkonstrukt), denn darin befindet sich das Array von audioElement - audioFiles ist auch nur ein Array, in dem die Dateien stehen, die benötigt werden für diese Seite und audioFormat ist das, was ermittelt wurde.
Code: 
_obj.audioElement[ len ] = document.createElement('audio');
_obj.audioElement[ len ].setAttribute('src', _obj.audioFiles[i]+"."+_obj.audioFormat);
_obj.audioElement[ len ].load();
len++;

Tipp zur Vorgehensweise:
1. Ermittle, ob der User "Sound" überhaupt hat und ermittle das unterstützte Format!
2. Übergebe die Files, die geladen werden müssen!
3. Lade diese Files!
4. Sorge mit flags dafür, dass der User erst hantieren kann, wenn Audio bereit steht (Preload, "bitte warten"- bzw. Splash-Screen)

Mehr hätte ich nicht für Dich ... doch, eines: Hab Spaß dabei, weil es einfach nur Laune macht! :D
 
SteelWheel schrieb:
Alle haben einen Aussetzer dazwischen. Je nach Browser dauert der mal (immer hörbar) bis zu 0,5 s.
Zum Vergrößern anklicken....
Jo, wie soll das aber auch klingen wenn die pause nicht dazwischen wäre:uncomfortableness: Bei Hintergrundmusik wird meistens leicht ein und ausgeblendet.

SteelWheel schrieb:
Eine Lösung, die auf allen Geräten auch funktioniert, gibt es nicht! (sonst freue ich mich über Hinweise)
Zum Vergrößern anklicken....
Mit dem web audio Scriptprocessor könnte/sollte das möglich sein. Das Probiere ich morgen gleich mal aus wenn ich es denn Zeitlich schaffe.
 
Wenn ich ein 4-Takt-Backgroundgedudel habe (eigene Produktion :p), sollte dies nahtlos abspielen. FadeIn/-Out hilft da gar nicht - alles andere macht die Datei (für Backgroundgedudel; bspw. Menümusik, Szenerie etc.) schlichtweg zu groß (klingt übrigens auch wirklich nur bei Titeln, die länger sind). Die Datei jetzt ist als mp3 zarte 36 KB klein. Wenn ich dahinter aber einen meiner Tracks legen würde, sähe die Size wohl ganz anders aus. ;)

Den Test kannst Du Dir womöglich sparen - da war schon einer schneller: klick. Kommt für mich aber auch generell nicht in Frage! Weil?

Gem. MozDev läuft es auf keinem Mobilgerät und im IE (Desktop) ebenso nicht. Browserkompatibilität ist (mir) aber wichtig.

Ich hoffe demnach weiterhin auf die Browserhersteller - dass die das irgendwann gelöst haben. Und nein, mit Callback-Trickserei klappt es auch nicht - auch nicht mit Pre-Loader, Pre-Buffering o. ä. Einzige Lösung - so mein Kenntnisstand: Flash. Aber das kommt mir nicht ins Projekt. :D

Danke Dir dennoch.
 
SteelWheel schrieb:
Den Test kannst Du Dir womöglich sparen - da war schon einer schneller: klick.
Zum Vergrößern anklicken....
Die Seite beschreibt ja nur das man den ScriptProcessor nicht unbedingt benötig für die Soundausgabe. Am ende ist für die loop ja das createBufferSource() Objekt verantwortlich.
Ergo genau das selbe was ich zuvor gepostet habe. Da die 0.5s Pause ja nun noch vorhanden ist klingt das Weiße Rauschen wie ein Maschinengewehr im Regen.

SteelWheel schrieb:
Gem. MozDev läuft es auf keinem Mobilgerät und im IE (Desktop) ebenso nicht. Browserkompatibilität ist (mir) aber wichtig.
Zum Vergrößern anklicken....
Was hat die Web audio api mit Mozilla zu tun? Die WAAPI ist doch eine Erfindung von Google. Mozilla hatte doch Jahre zuvor schon die Audio Data API und die wollten ja deswegen
die WAAPI gar nicht erst supporten.

Die WAAPI läuft auf den IPhone auf jeden. Ansonsten: Can I use... Support tables for HTML5, CSS3, etc
Bei Microsoft schient allerdings noch keiner von der WAAPI gehört zu haben.

SteelWheel schrieb:
auch nicht mit Pre-Loader, Pre-Buffering o. ä. Einzige Lösung - so mein Kenntnisstand: Flash.
Zum Vergrößern anklicken....
Nee flash geht gar nicht.:d Hast du es schon mal mit cloneNode() versucht?
z.B:
Code: 
audio=document.getElementById("sfx").cloneNode(true);
if(){
audio.play();
audio=document.getElementById("sfx").cloneNode(true);
}
Mann müsste das klonen nur ziemlich genau timen sonnst passt da wider nicht.
 
Zuletzt bearbeitet von einem Moderator:
xorg1990 schrieb:
Mann müsste das klonen nur ziemlich genau timen sonnst passt da wider nicht.
Zum Vergrößern anklicken....
Ich bezweifel, dass dies möglich ist - nicht das Klonen, sondern das Timen quer durch die Browserlandschaft.

Sonst: Ich habe schlichtweg mit dem Begriff "web audio Scriptprocessor" DocG gefüttert und mir ein paar SERPs angelesen, da mir der Ausdruck vorher noch nicht über den Weg gelaufen war.
 
Auch wenn wir schon weit über das Thema von xeno drüber raus sind fällt mir noch was ein.
Du könntest dir die Duration in sec ermitteln, dann könnte man was mit SetInterval/SetTimeout zusammen basteln.
Die duration kann man erst ermitteln wenn alle Header-Daten geladen sind. Das geht dann so:

Code: 
var audio = document.getElementById("Audio");
audio.onloadedmetadata = function() {
    console.log(audio.duration);//in sec
   audio.play();
   //setInterval 
};

Mehr weesch dann ooch nicht.:grin:
 
Zuletzt bearbeitet:
Ja, wohl wahr, dass wir etwas "overdozed" unterwegs sind. ^^

Ich meine, dass in einem der vielen Bücher mit grünem Rücken (= O'Reilly) stand, dass die Intervall bzw. Timeouts nicht derart präzise laufen, wie man es mit der bspw. angegebenen Zahl erwarten würde. Wir reden hier von zweistelligen ms-Zahlen vor wie danach. Ich such das später mal raus ... (inkl. ISBN).
 
SteelWheel schrieb:
Ich such das später mal raus ... (inkl. ISBN).
Zum Vergrößern anklicken....
Nee braust du nicht ich kenne das leidige Thema zu genüge. Ich Programmiere einen Online SpectrumAnlayser + Oszilloskop (in Js ist ein wenig krankt..ich weiß) und da ist es halt auch wichtig vernünftig zu timen.
Ja stimmt das SetInterval/Timeout arbeitet noch mit dem 16bit Timer.
Es gibt da aber eine alternative:
When milliseconds are not enough: performance.now()

Ein Timout muss man dann über eine Schleife lösen:
Code: 
function Timeout (ms) {
ms += Date.now();
while (Date.now() < ms){}
}
ein Intervall ist ja praktisch das gleiche, nur das sich die Funktion immer selbst neu aufruft.
Ist halt nur die frage was die cpu load macht da ja am Ende eine Endlosschleife. Damit ist mein wissen dann am Ende.
Zu Browserkompatibilität der High Resolution Time kann ich nichts sagen.

VG
Xorg1990
 
Durchaus interessant ... aber die von Dir befürchtete CPU Load schätze ich mal "nicht vertretbar" ein, da meist ja nicht nur dieses eine Script läuft, sondern auch noch div. andere Sachen - von den manuell getriggerten Aktionen mal ganz zu schweigen.

Dir wünsche ich viel Erfolg bei Deinem "kranken Projekt". :D Es klingt spannend - wofür wirst Du die beiden benutzen/was sollen die später analysieren?
 
SteelWheel schrieb:
wofür wirst Du die beiden benutzen/was sollen die später analysieren?
Zum Vergrößern anklicken....
Uii das zu erklären wird heftig. Bei den Oszilloskop weiß ich noch nicht ob ich das überhaupt mal mach, gedacht war es für die I/Q Phasenverschiebung und für die Darstellung der Impulsantwort für den/die ConvolverNode.

Der Analyser analysiert PCM Daten der Soundkarte.
Das ist ein Funk-Amateur Projekt und sehr komplex.
Momentan ist der stand der dinge so:
Es gibt überall auf der Welt sogenannte Grabber.
Diese stellen das Funksignal in einem Spektrum dar. Dazu brauch man ein Windows Rechner + Eine Analyser Software + Ein Programm das Intervall mäßig Screenshots macht.
Das ist recht aufwendig und Teuer(Rechner läuft rund um die Uhr), zumal man Normal-CW(Morsen so wie man es kennt) nicht schell genug ins Internet geladen bekommt das müsste aller 30sec geschehen. Bei 50wpm(word per minute) müsste der upload aller 10sec geschehen. Am ende muss sich die Seite oder das Bild auch noch aller 10sec aktualisieren... eher unschön.

Da habe ich mir gedacht warum nicht gleich den PCM Stream zum Client liefern un daraus ein Spektrum rendern. Für die Quatisirung reichen 16bit aus. und die Samplerate ist auch nur so hoch wie das darzustellende Spektum. z.B Mittelwelle 472-479kHz = 7Khz*2(Nyquist)=14Khz.
Das Signal muss natürlich vorher via HilbertTrafo auf 0-7Khz Runter gemischt werten.

Für das Streamen benötigt man nur das RaspberryPi(deshalb billiger) und Nodejs. Der Eigentümer des Empfängers legt fest was welche Frequenz die User zu sehn und zu hören bekommen. Das ganze steuert sich über ein Browser Interface.

Der Websdr Twente Stream 30Mhz durch Internet 10Mbit Server Anbindung für ~200User... also ich sehe für meine 14kHz keine Bandbreiten Probleme.

Den DSP Teil lasse ich mal weg. Jedenfalls das Streamen und rendern geht bis jetzt goldig.
Vielen dank an dieser Stelle an das tolle Forum.
 
Du musst den Audio-Tag mittels

Code: 
this.pause()
erst anhalten, und dann mittels
Code: 
this.load()
neu laden.
Wenn dann dazwischen keine neue URL an das Audio-Tag übergeben wurde, stoppt es.
 
Die Frage ist längst beantwortet; xeno scheint sich aber nicht mehr zu melden...
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben