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;
functionplay_pause(player) {
  if (currentsound) {
    currentsound.pause();
    currentsound = null;            // currentsound should be reset and return from functions to prevent playing againreturn;
  }
  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:

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

    }
}

And call it from first function:

functionplay_pause(player) {
  if (currentsound) {
    currentsound.pause();
    currentsound = null;
    toggleIcon(false);     // <----- toggleIcon falsereturn;
  }
  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)

<scriptlanguage="javascript">var currentsound;
    functionplay_pause(player) {
    var myAudio = document.getElementById(player);
        if(myAudio.paused) {
        myAudio.play();
        } else{
        myAudio.pause();
        }   
                                }
    functionchangeImage(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:

<audiopreload="none"id="myAudio1"src="http://www.../.../Music1.mp3"type="audio/mpeg"></audio><imgsrc="http://www.../.../play.png"width=30height=30border="0"onclick="play_pause('myAudio1');changeImage(this)"><!--id needs to be changed manually (id and onclick event) --><audiopreload="none"id="myAudio2"src="http://www.../.../Music2.mp3"type="audio/mpeg"></audio><imgsrc="http://www.../.../play.png"width=30height=30border="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>functionaudios1(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";
        });
        }

functionaudios2(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>