Musikplayer in eigenes Design einbetten?

[SyntaxError]

Hallo Community!

Ich hab eine Frage. Und zwar: Ich habe eine Website mit komplett grafischem Frameset. Heisst also, das ganze Frameset ist gemalt und arbeitet mit Hotspots. Ich würde gerne ein Mp3 File abspielen lassen, aber mag dem Leser das nicht aufzwingen und will ihm die Möglichkeit geben, es zu stoppen, wenns ihn nervt. Das Blöde ist, dass diese vorgefertigten Musikplayer, die man einbetten kann, nicht zu meinem Design passen. Daher würde ich gerne einen Musikplayer irgendwie im Hintergrund rödeln lassen, aber im Design selber sone Art Play und Stoptaste malen, wo man dann draufdrücken kann um Musik abzuspielen oder zu stoppen. Ist das überhaupt möglich?

Ich muss dazu sagen: Ich bin son Oldschoolmensch, daher hab ich nicht wirklich ne große Ahnung von dem, was heutzutage so möglich ist. Hat da jemand irgendne Idee parat? Ich wäre sehr dankbar!

[Richard Rüfenacht]

Hallo

Das Blöde ist, dass diese vorgefertigten Musikplayer, die man einbetten kann, nicht zu meinem Design passen. Daher würde ich gerne einen Musikplayer irgendwie im Hintergrund rödeln lassen, aber im Design selber sone Art Play und Stoptaste malen, wo man dann draufdrücken kann um Musik abzuspielen oder zu stoppen. Ist das überhaupt möglich?

Das <audio>-Element bietet dir die Möglichkeit, anstelle der Standard-controls eigene controls frei nach deinen Wünschen zu gestalten und mit JavaScript zu steuern. Die gleiche Möglichkeit hast du auch mit Flash, was du allenfalls auch als Fallback für IEs vor 9 einsetzen kannst.

Mit besten Grüssen Richard

[SyntaxError]

Hallo,

danke für eure Antworten. Java würde ich ungern verwenden, dann doch eher Flash. Die frage ist, wie die exakten Codes dafür lauten und wie ich die Bediedung des Players auf meiner grafischen Oberfläche trotzem noch anbieten kann. Wie sähe also der HTML Tag dafür aus?

[M.]

Mahlzeit,

Java würde ich ungern verwenden,

Passt doch, es geht ja um Javascript.

dann doch eher Flash.

Aha, du willst mobile Endgeräte ausschliessen? Das solltest du bei deiner Problemstellung dazuschreiben.

[Richard Rüfenacht]

Hallo

Wie sähe also der HTML Tag dafür aus?

Falls du wirklich „Tag“ meinst: <audio> … </audio>

Java würde ich ungern verwenden …

Ohne JavaScript (nicht Java!) wirst du das Standard-control in oder neben deinem Kunstwerk irgendwie sichtbar unterbringen müssen. Das wäre die einfachste Lösung.

… dann doch eher Flash

Das Erstellen eines eigenen Player mit Flash ist um einiges komplizierter als das Steuern des <video>-Elements mit JavaScript. Es gibt aber genügend fertige Flash-Player, die verwendet werden können. Die Schwierigkeit dürfte sein, einen zu finden, der deinen Vorstellungen entspricht. Und bedenke, dass Flash nur auf wenigen mobilen Geräten funktioniert.

Die frage ist, wie die exakten Codes dafür lauten und wie ich die Bediedung des Players auf meiner grafischen Oberfläche trotzem noch anbieten kann.

Du erwartest doch sicher nicht wirklich, gleich den fertigen Code zu bekommen! Schwierig ist das nicht und Hilfe bei konkreten Fragen bekommst du hier sicher.

Mit den besten Grüssen
Richard

[mark]

Java würde ich ungern verwenden, dann doch eher Flash. Die frage ist, wie die exakten Codes dafür lauten und wie ich die Bediedung des Players auf meiner grafischen Oberfläche trotzem noch anbieten kann. Wie sähe also der HTML Tag dafür aus?

Um Javascript kommst du nicht rum, wenn du html5 - audio verwenden möchtest.

Sieh dir das Beispiel nochmal an, das ich bereits verlinkt habe. Dort steht alles, du musst nur verstehen wollen:

  
<audio id="audio_with_controls" controls="controls" autobuffer="autobuffer">  
      <source src="audio.mp3" type="audio/mp3" />  
       Ihr Browser kennt das HTML5-audio-Element noch nicht.  
</audio>

• Das controls-Attribut löschst du raus, da du ja deine eigenen Bedienelemente verwenden willst.
• Mit dem src-Attribut übergibst du die URL (absolut, oder relativ) zu deiner Audio-Datei an. Am besten verwendest du das *.mp3-Format, das wird von den meisten Browsern unterstützt. *Ogg leider nicht.
• "Ihr Browser kennt das HTML5-audio-Element noch nicht." Ist ein Fallback: ein Text, der nur dann angezeigt wird, wenn der Browser html5-Audio nicht unterstützt. Kannste auch wecklassen.

Die Steuerung funktioniert folgendermaßen:

<button id="play">Play</button>  
<button id="pause">Pause</button>  

• statt <button> kannst du auch <div> nehmen, wo du dann per CSS dein Play-, oder Stop-Bild anzeigst.
• um etwaige Komplikationen zu vermeiden ist es wichtig, dass du eindeutige IDs verwendest. Die ID "play" bzw. "pause" und "audio_with_controls" sollte nur einmal auf deiner Seite vorkommen.

Diesen <button>-Elementen wird dann mittels Javascript ein Eventlistener zugewiesen. Dieser wartet auf einen 'click'-Event und führt dann z.B. die Funktion song.play(); aus. Anders gesagt: Wenn du draufklickst wird deine mp3 wird abgespielt.

var song = document.getElementById('audio_with_controls');  
document.getElementById('play').addEventListener('click', function() { song.play(); }, false);  
document.getElementById('pause').addEventListener('click', function() { song.pause(); }, false);  

Das ist alles, was du brauchst.
Von der Benutzung von Flash würde ich ebenfalls abraten, das brauchst du nicht und macht die Funktionen deiner Seite nur abhängig von einem Plugin. Wenn du's ordentlich machen willst, brauchst du dann noch einen Fallback für Browser die nicht Flash unterstützen und das sind vor allem im Smartphone-Tablet-Bereich eine nicht zu vernachlässigende Zahl.

In weniger als 15 Zeilen hast du das in html5+javascript+css betriebsbereit.

lg
mark

[mark]

Ich muss dazu sagen: Ich bin son Oldschoolmensch, daher hab ich nicht wirklich ne große Ahnung von dem, was heutzutage so möglich ist. Hat da jemand irgendne Idee parat? Ich wäre sehr dankbar!

Lies dich am besten mal in "html5 audio" ein. Wenn du nur Start und Stop benötigst und nur einen Track abspielen möchtest, geht das mit wenigen Zeilen Javascript. Die Standard Ansicht des Players blendest du aus, indem du kein controls-Attribut setzt.

Eine andere Möglichkeit sind Javascript API's, z.B. Soundmanager2. Unterstützt HTML5 und hat zur Not auch einen Flash-Fallback.
http://www.schillmania.com/projects/soundmanager2/

Nachteile hierbei sind, dass einiges an Vorkenntnissen von Nöten ist (Javascript). Auch kommt der Soundmanager2 mit derart vielen Features daher, dass er für deine Anwendung wohl ziemlich überladen ist.

lg
mark

[SyntaxError]

Ich habe jetzt diesen HTML5 Audioplayer eingebunden. Funktioniert auch. Das Problem ist der sichtbare Player. Ich würde den gern verstecken und die Bedienelemente wie Play und Stop via Hotspot auf der grafischen Oberfläche verlinken, bzw die Play und Stoptaste eben auf der Grafik selber malen und sie mit Hotspot anklickbar machen. Wie ist das möglich?
Geht das überhaupt?

[SyntaxError]

Gibt es eine Möglichkeit, über Hotspots die Funktionen des Players (zb Play/Stop/Pause) zu benutzen?

[M.]

Mahlzeit,

Gibt es eine Möglichkeit, über Hotspots die Funktionen des Players (zb Play/Stop/Pause) zu benutzen?

Natürlich. Sind ja auch nur Links.

[Richard Rüfenacht]

Hallo

Gibt es eine Möglichkeit, über Hotspots die Funktionen des Players (zb Play/Stop/Pause) zu benutzen?

„Nein, das geht nicht!“ wäre die richtige Antwort auf die falsche Frage.

Von den Hotspots aus kannst du nicht auf die Bedienelemente eines Players (egal welchem) zugreifen. Es geht doch darum, eine Audiodatei von den Hotspots aus zu starten, zu stoppen usw. und nicht einen Player zu steuern. Das wird erreicht, indem den Hotspots die Funktionen der controls mit Hilfe von JavaScript gegeben werden. Dann funktioniert das, was du möchtest.

Das <audio>-Element selbst ist nicht sichtbar, sichtbar ist das control, wenn der Browser dazu angewiesen wird. Bei einem HTML5-Audioplayer wird lediglich das control-Element anders gestaltet, das hilft dir nicht weiter.

Mit besten Grüssen
Richard