JavaScript Ein- und Ausblenden von Audiodateien

[Lulu92]

Hey,
ich bin noch im Anfangsstadium des Website-Erstellen.
Ich habe folgendes Problem und wollte fragen, ob mir vielleicht jmdn weiterhelfen kann.
Ich habe 72 Audiostücke, möchte die aber nacheinander einblenden lassen (auf einer Seite).
D.h. es erscheint zuerst das erste Stück, dann kann man auf einen Button drücken und es erscheint das nächste Stück. Nach dem letzten Stück soll man durch Buttondruck auf eine andere Seite kommen.
Wie man Buttonserstellt weiß ich, nur nicht wie man die Stücke nacheinander durch drücken einblenden lässt.
Kann mir da jmdn vll helfen?

 

[Daaron]

Nutzt du das HTML5-Element <audio>? Dann verändere bei Knopfdruck das <source>-Element. Und ansonsten: Wirf einen scharfen Blick auf die Audio-API.

 

[powerfx]

Wie sind denn die Audiodateien eingebunden? Falls mittels <audio> von HTML5, kann man die Lautstärke einfach mit "volume" bestimmen.
Dort eine passende Schleife und dann sind auch Ein- und Ausblendungen möglich.

 

[Lulu92]

Wie meinst du das? Also wie soll ich das <source> Element verändern?
Ich glaube ich habe mich falsch ausgedrückt. Ich mag nicht, dass einfach der Ton oder so verschwindet, ich mag, dass die ganze Audiodatei nicht mehr auf der Seite ist. Also man soll durch Buttondruck sich nacheinander die Audiodateien anzeigen lassen. Ist das möglich? Und die dateien sind mit <audio> eingebunden...

 

[Freezedevil]

Dem <audio> Element musst du doch aber irgendwie mitteilen, was es abspielen soll. Das läuft über ein <source> Element. Das sieht dann beispielsweise so aus <source src="music.mp3" type="audio/mpeg"> Du musst jetzt beim Klick auf den Button per Javascript das die Eigenschaft src von dem <source> Element ändern. Anschließend sollte die neue Datei abgespielt werden.
Das hat Daaron versucht dir zu sagen. Vielleicht ist es ja jetzt klarer geworden.

Nochmal ein Link dazu http://www.w3schools.com/html/html5_audio.asp

 

[Lulu92]

Hmm so mein ich das nicht. Die Audiodatei soll so oft abspielbar sein wie der Besucher der Webseite möchte. Erst wenn er auf einem Button "nächste Audiodatei" drückt, soll die nächste Audiodatei erscheinen. Ich bin ein bisschen verzweifelt

 

[Daaron]

Wo genau hapert es denn? Du musst nur ein paar Schaltflächen erzeugen, die die verschiedenen Aspekte der Audio-API ansteuern. Ein Knopf spielt den aktuellen Track, der nächste liest aus deiner (vorher angelegte) Playlist den nächsten Track aus und packt den statt des aktuellen ins <source>

 

[Lulu92]

Okay. Das versteh ich schon ein bisschen besser.
Das sind jetzt zum Beispiel meine ersten zwei Audiodateien
<audio controls>
<source src="../Musik/Item_01.wav" type="audio/wav" alt="Musikstück">
Your browser does not support the audio element.
</audio>

<audio controls>
<source src="../Musik/Item_02.wav" type="audio/wav" alt="Musikstück">
Your browser does not support the audio element.
</audio>
--> 70 weitere folgen...

Und das mein Button
<form action="?????">
<div>
<input class="NächsteAudiodatei" type="submit" value="Next"/>
</div>
</form>

Kann mir jmdn als Quelltext ausdrücken, was ich da jetzt schreiben müsste? Hilfeeeeeeee

 

[Daaron]

Ich werd nicht die ganze Arbeit für dich machen, aber ich kann dich auf den Weg bringen...
1.) Du brauchst kein ganzes Formular. Da deine Ansteuerung eh nur über JS funktioniert reichen hier x-beliebige Elemente, denen du onclick-Events verpasst.
2.) Du brauchst keine 70 <audio><source>...</audio>. Du brauchst genau EINES, und dazu im JavaScript eine Playlist, in der du alle URLs der Tracks hinterlegst.

 

[Lulu92]

Wahrscheinlich dumme Frage, aber: Wie erstellt man eine Javascript Playliste? Ich habe versucht was im Internet zu finden, bin aber nicht fündig geworden -.-. Kann ich also bei den Audiotiteln direkt sowas wie ein Button erstellen, der zum nächsten Titel führt? Oder was meinst du mit x-beliebige Elemente?

 

[slaves]

So könnte man das bspw. lösen.

 

[Daaron]

Wie du deine Playlist organisierst ist deine Entscheidung. Logisch wäre ein Array oder ein JSON-String.

Und nochmal: Es ist Jacke wie Hose, ob du deine Click-Events auf ein <a>, ein <div>, einen <button>, ein <img> oder sonstwas legst. Ein komplettes Formular ist lediglich totale Codeverschwendung.

 

[Lulu92]

Das wäre jetzt z.B. ein Array oder?:
var Audio = new Array();
audio[1] = "../Musik/Item_01.wav";
audio[2] = "../Musik/Item_02.wav";
audio[3] = "../Musik/Item_03.wav";
audio[4] = "../Musik/Item_04.wav";

Falls ich es doch mit Formular machen mag dann so was (anders versteh ich es leider nicht, also wie man irgendwo ein oclick einfügt, weil ich ja einen Button haben möchte)

<form >
<div>
<input class="NächsteAudiodatei" type="submit" value="Next" onclick="nächsteAudiodateiAusgeben()"/>
</div>
</form>

"nächsteAudiodateiAusgeben()"--> irgendeine Funktion

Geht das in die richtige Richtung? Ich habe allerdings keine Ahnung wie so eine Funktion dann aussehen könnte. Also es müsste ja irgendeine Schleife drin sein, die jedesmal den Index erhöht, um den die nächste Audiodatei auszugeben...