ボタンをクリックすると音声を一時停止し、ボタンの画像を変更します

Question

ボタンをクリックして音声を再生し、一時停止して元の画像に戻すことはできません。私は交換するためにimgを得ることができ、下のコードでオーディオを始めることができますが、それを一時停止する喜びはありません。

https://jsfiddle.net/se4xqzsm/ これはまた、あなたの関数にpause()メソッドを追加する必要があり、私の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

です。

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

以下のコードスニペットを実行してすべての動作を確認してください。

#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>