Pause Audio auf klicken und Bild der Schaltfläche ändern

Question

Ich habe keine Lösung gefunden, um eine einzelne Schaltfläche img zu ändern, wenn geklickt, Audio abspielen, und dann pausieren und zum ursprünglichen IMG bei Klick wieder zurückkehren. Ich kann den Img zum Tauschen bekommen, und Audio, um mit dem Code unten zu beginnen, aber keine Freude, es zu pausieren.

https://jsfiddle.net/se4xqzsm/ Dies ist mein Javascript

function changeImage() { 
    var image = document.getElementById('player'); 
    if (image.src.match("pauseicon")) { 
    image.src = "http://igor.gold.ac.uk/~tprat001/fp_html/playicon.png"; 
} else { 
    image.src = "http://igor.gold.ac.uk/~tprat001/fp_html/pauseicon.png"; 
} 
} 
    function play(){ 
    var audio = document.getElementById("audio"); 

    audio.play(); 

} 

HTML

<img id="player" onclick="play();changeImage();" src="http://igor.gold.ac.uk/~tprat001/fp_html/playicon.png" /><audio id="audio" src="http://igor.gold.ac.uk/~tprat001/fp_html/whale.mp3" loop autoloop ></audio> 

CSS

#audioplayer{ 
position:absolute; 
z-index: 100; 
cursor: pointer; 
height: 80px; 
width: 80px; 
border-radius: 50%; 
background-color:#6854e7; 

} 

Answer 1

Sie müssen auch die pause() Methode, um Ihre Funktion hinzufügen.

var playing = false; 
function action(){ 
    var audio = document.getElementById("audio"); 
    if(playing === false){ 
     audio.play(); 
     playing = true; 
    }else{ 
     audio.pause(); 
     playing = false; 
    } 
} 

Führen Sie das Code-Snippet aus, um alles in Aktion zu sehen.

#audioplayer { 
 
    position: absolute; 
 
    z-index: 100; 
 
    cursor: pointer; 
 
    height: 80px; 
 
    width: 80px; 
 
    border-radius: 50%; 
 
    background-color: black; 
 
} 
 

 
#audioplayer:hover { 
 
    -moz-box-shadow: 0 0 20px #6854e7; 
 
    -webkit-box-shadow: 0 0 20px #6854e7; 
 
    box-shadow: 0px 0px 20px #6854e7; 
 
}

<script> 
 
    function changeImage() { 
 
    var image = document.getElementById('player'); 
 
    if (image.src.match("pauseicon")) { 
 
     image.src = "http://igor.gold.ac.uk/~tprat001/fp_html/playicon.png"; 
 
    } else { 
 
     image.src = "http://igor.gold.ac.uk/~tprat001/fp_html/pauseicon.png"; 
 
    } 
 
    } 
 
    var playing = false; 
 

 
    function action() { 
 
    var audio = document.getElementById("audio"); 
 
    if (playing === false) { 
 
     audio.play(); 
 
     playing = true; 
 
    } else { 
 
     audio.pause(); 
 
     playing = false; 
 
    } 
 
    } 
 

 
</script> 
 

 
<div id="audioplayer"> 
 

 
    <img id="player" onclick="action();changeImage();" src="http://igor.gold.ac.uk/~tprat001/fp_html/playicon.png" /> 
 
    <audio id="audio" src="http://igor.gold.ac.uk/~tprat001/fp_html/whale.mp3" loop autoloop></audio> 
 

 
</div>