JavaScript Audio Controls mit eigenem Bild und onclick Event

[Falc410]

Ich bin gerade am verzweifeln. Ist wahrscheinlich nur ein ganz simpler Fehler aber ich komm einfach nicht drauf.

Ich benutze das HTML 5 audio Tag um eine Mp3 abzuspielen, allerdings will ich den Browser eigenen Player ausblenden und stattdessen z.B. nur meinen eigenen Play / Pause Knopf anzeigen. Dieser soll, je nachdem ob das MP3 gerade läuft oder nicht, eben ein Play oder Pause Bild haben. Dazu habe ich mich an die Event Listener des Audio drangehängt. Das Bild wechselt auch einwandfrei, nur der Knopf funktioniert nicht.

Wenn ich in die Developer Console direkt startAudio() eintippe kommt zwar ein undefined zurück aber die MP3 Datei wird abgespielt. Wenn ich stattdessen playPause() eingebe passiert gar nichts. Und obwohl ich sehe dass das Bild einen Eventlistener hat, passiert einfach nichts wenn ich darauf klicke.

 <div ID="audio">
                                <audio id="myaudio" controls preload="auto">
                                    <source src="{{ audioData.uri }}" type="audio/mpeg">
                                </audio>
                                <input type="image" width="100" height="100" src="{%  static 'images/playbutton.png' %}" id="controlButton" onclick="playPause()">

                            </div>

<script type="text/javascript">
    audio = document.getElementById('myaudio');
    controlButton = document.getElementById('#controlButton');

    function startAudio() {
        audio.play();
    }

    function playPause() {
        //audio = document.getElementById('myaudio');
        audio.playing == true ? audio.play() : audio.pause();
    }
// ...
 audio.onplay = function () {
        playing()
    };

    function playing() {
        audio.playing = true;
        $('#controlButton').attr('src', "{%  static 'images/pausebutton.png' %}");
    }
// ...

 

[Daaron]

audio.playing == true ? audio.play() : audio.pause();

Ist das nicht ziemlicher Quatsch? Sinngemäß steht da doch: "Wenn es spielt, spiele ab, ansonsten pausiere." Also entweder audio.playing == false, oder play() udn pause() tauschen

 

[Falc410]

Oh mann...
Danke dir, das war natürlich der Fehler. Ich habe blind Copy & Paste aus meinem Testprojekt gemacht. Anscheinend hatte ich damals das schon verdreht implementiert.