[FRAGE] Html 5 Player Button

[GvS]

Hallo, ich bin Gunni und neu hier. Ich bräuchte Hilfe bei folgenden Problem.
Ich versuche gerade mit meinen bescheidenen Kenntnissen einen eigenen Audio Player für Icecast Stream zu bauen.
Weil der Player in ein Bild integriert ist, soll er so wenig Platz wie möglich einnehmen.
Es sollen ein Play, Pause, Vol+ und Vol- Button zu sehen sein.
Das hab ich soweit auch hinbekommen und es funktioniert.
Nun scheitere ich an dem Versuch, Play Button durch klick den Stream zu starten und sich dann in den Pause Button zu verwandeln. Somit könnte ich den Platz von einem Button einsparen.
Ich finde Scripts um mit Javascript eine Funktion zu ändern und auch ein Bild zu ändern, aber ich schaffe es nicht beides zusammen zu bringen.
Hinweis: Ich möchte nicht die Standard Buttons verwenden sondern eigene Images für die Player Buttons.

Bisher mit getrennten Buttons sieht mein Code so aus

<audio id="player" src="http://xxx"></audio>
<div class="bg">
<div id="control">
<div id="play"><button onclick="document.getElementById('player').play()" ><img src="http://forum.chip.de/images/play.png"></button></div>
<div id="plus"><button onclick="document.getElementById('player').volume += 0.1"><img src="http://forum.chip.de/images/volplus.png"></button></div>
<div id="min"><button onclick="document.getElementById('player').volume -= 0.1"><img src="http://forum.chip.de/images/volmin.png"></button></div>
<div id="pause"><button onclick="document.getElementById('player').pause() "><img src="http://forum.chip.de/images/pause.png"></button></div>
<script>
document.getElementById("player").volume=0.3;
</script>
</div>

Könnte mir da jemand bitte helfen?

 

[j-l-n]

Hallo Gunni,
willkommen im Forum.
Bitte verwende in Zukunft für mehrzeiligen Code die entsprechenden Tags.

: eignet sich - unter anderem - für die Kennzeichnung von Funktionsnamen und Fehlermeldungen, sowie für einzeilige Code-Ausschnitte
[/QUOTE]

 

[dbarthel]

versuche mal folgenden Gedanken, als Inspiration zu sehen:

<audio id="player" src="http://xxx"></audio>
<div class="bg">
<div id="control">
<div id="play">
<button onclick="abspielen()"><img id="playbutton" src="http://forum.chip.de/images/play.png" style="display:block;"></button>
<button onclick="document.getElementById('player').pause() "><img id="pausebutton" src="http://forum.chip.de/images/pause.png" style="display:none;"></button>
</div>
<div id="plus"><button onclick="document.getElementById('player').volume += 0.1"><img src="http://forum.chip.de/images/volplus.png"></button></div>
<div id="min"><button onclick="document.getElementById('player').volume -= 0.1"><img src="http://forum.chip.de/images/volmin.png"></button></div>
<script>
function abspielen() 
{
document.getElementById('player').play();
document.getElementById('playbutton').css(display, none);
document.getElementById('pausebutton').css(display, block);
}
document.getElementById("player").volume=0.3;
</script>
</div>

einiges davon kann man natürlich besser machen und statt inline sollte eine Klasse verwendet werden, aber der Ansatz sollte stimmen.

 

[SteelWheel]

... und statt inline sollte eine Klasse verwendet werden ...

*psst* ... er meint CSS!

 

[j-l-n]

document.getElementById('playbutton').css(display, none);

Man sollte zum einen dazusagen, dass das jQuery ist - zum anderen kann das gar nicht funktionieren, selbst wenn jQuery eingebunden wäre:

propertyName
Type: String
A CSS property name.
value

Type: String or Number
A value to set for the property.
.css() | jQuery API Documentation

Ganz abgesehen davon, dass das Ganze auch ohne jQuery und besser nativ geht: document.getElementById('playbutton').style.display = "none";

Außerdem: was ist, wenn der User das Audio anhalten will? Der Button sollte entsprechend ausgetauscht werden...

Als Anregung: Creating a Custom HTML5 Audio Element UI | Design Shack - natürlich würde es auch viel simpler gehen, aber dafür hat man hier auch ein Plugin für Browser, die die HTML5 Audio-API nicht unterstützen...