Toogle Icon (play/pause), And Stop When Another Button Is Clicked

Hope this post is not doubled, since i've search a lot for my same question and i surely found some but none of them really helped me. I just need to 'mix' the scripts i found so i

Solution 1:

I suppose your first code is wrong:

var currentsound;
function play_pause(player) {
  if (currentsound) {
    currentsound.pause();
    currentsound = null;            // currentsound should be reset and return from functions to prevent playing again
    return;
  }
  var myAudio = document.getElementById(player); 
  myAudio.play();
  currentsound = myAudio;
  myAudio.currentTime = 0;
  //myAudio.play();                                   // duplicated code
}

To toggle an image it's not nessasary to mix the code. Just call the second functions from first one with some modifications:

function toggleIcon(playing) {
    var image = document.getElementById('image')
    if (playing) {
      image.src = "play.png";
    } else {
      image.src = "pause.png";

    }
}

And call it from first function:

function play_pause(player) {
  if (currentsound) {
    currentsound.pause();
    currentsound = null;
    toggleIcon(false);     // <----- toggleIcon false
    return;
  }
  var myAudio = document.getElementById(player); 
  myAudio.play();
  currentsound = myAudio;
  myAudio.currentTime = 0;
  toggleIcon(true);        // <----- toggleIcon true
}

---

Or even better - use events pause and play and do not touch play_pause function:

document.getElementById("myAudio2").onpause = function() {
    toggleIcon(false);
};

document.getElementById("myAudio2").onplay = function() {
    toggleIcon(true);
};

Solution 2:

Well, after a lot of research i could get something that for now it's ok for me. I just want to share if anybody else gets my same problem

This are my scripts (i needed to use 2)

    <script language="javascript">
    var currentsound;
    function play_pause(player) {
    var myAudio = document.getElementById(player);
        if(myAudio.paused) {
        myAudio.play();
        } else{
        myAudio.pause();
        }   
                                }
    function changeImage(img) {
    var imgfile = img.src.split(/\s+/).pop();   
    if (imgfile =="http://www.../.../pause.png" ) 
    {
        img.src = "http://www.../.../play.png";
    }
    else 
    {
        img.src = "http://www.../.../pause.png";
    }
                    }
</script>

And what basically do is that the first function do a play/pause for each button, and 2nd function toggle the image (see the onclick event)

This is my HTML:

    <audio preload="none" id="myAudio1" src="http://www.../.../Music1.mp3" type="audio/mpeg"> </audio> 
    <img src="http://www.../.../play.png" width=30 height=30 border="0"
    onclick="play_pause('myAudio1');changeImage(this)"> <!--id needs to be changed manually (id and onclick event) -->

<audio preload="none" id="myAudio2" src="http://www.../.../Music2.mp3" type="audio/mpeg"> </audio>
    <img src="http://www.../.../play.png" width=30 height=30 border="0"
    onclick="play_pause('myAudio2');changeImage(this)">

Indeed is not the best solution, because every time you click on another button (different from the one is running) them both will sound at same time, but at least you can play/pause each button individually and toggle the icons too. For more button just copy-paste the html part and change the id part

Hope is usefull for anyone else than me, and if you got a better answer like having a counter variable for put into the ID so don't need to be changed manually or playing/pause and stopping when any other button gets click, post it, will be very appreciate it!

Regards

Solution 3:

Use this script like this so you can toggle images and stop the audio also

<script>
function audios1(img,player) {
    var image = document.getElementById(img);
    var audio = document.getElementById(player);
    var otherimage = document.getElementsByTagName('img');
        for(var i = 0, len = otherimage.length; i < len;i++){
            if(otherimage[i] != image){
            otherimage[i].src= "start4.png";
            }
        }
        if (image.src.match("start4.png")) {
            image.src = "stop.png";
            audio.play();
            } else {
        image.src = "start4.png";
            audio.pause();
            }
        audio.addEventListener("ended", function() {
            audio.currentTime = 0;
            image.src = "start4.png";
        });
        }

function audios2(img,player) {
    var image = document.getElementById(img);
    var audio = document.getElementById(player);            
    var otherimage = document.getElementsByTagName('img');
    for(var i = 0, len = otherimage.length; i < len;i++){
        if(otherimage[i] != image){
        otherimage[i].src= "start4.png";
        }
    }
    if (image.src.match("start4.png")) {
        image.src = "stop.png";
        audio.play();
    } else {
        image.src = "start4.png";
        audio.pause();
    } 
    audio.addEventListener("ended", function() {
        audio.currentTime = 0;
        image.src = "start4.png";
    });
}
document.addEventListener('play', function(e){
    var audios = document.getElementsByTagName('audio');
    for(var i = 0, len = audios.length; i < len;i++){
        if(audios[i] != e.target){
            audios[i].pause();
            audios[i].currentTime = 0;
        }
    }   
},true);
</script>