Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jul 2014
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Exclamation javascript need help modifying a tiny script

    I have a script to play/pause random audio, which is assigned to a single button:

    HTML
    Code:
    <audio src=""></audio>
    <img src="" style="width: 30px; cursor: pointer;" onclick="playPause( this );" />
    Javascript
    Code:
    // src for play button
    var playSrc = "http://upload.wikimedia.org/wikipedia/commons/9/96/Crystal_Project_Player_play.png";
    // src for pause button
    var pauseSrc  ="http://upload.wikimedia.org/wikipedia/commons/d/dd/Crystal_Project_Player_pause.png";
    // array with sound's srcs
    var audios = [ "https://raw.githubusercontent.com/CreateJS/SoundJS/master/examples/assets/Game- Shot.ogg", "https://raw.githubusercontent.com/CreateJS/SoundJS/master/examples/assets/Game-Death.ogg", "https://raw.githubusercontent.com/CreateJS/SoundJS/master/examples/assets/Game-Spawn.ogg", "https://raw.githubusercontent.com/CreateJS/SoundJS/master/examples/assets/Game-Break.ogg" ];
     // when window full loads
     window.addEventListener( "load", function( windowLoadE ) {
     // first 'img' element on the page
     var img = document.getElementsByTagName( "img" )[ 0 ];
     // set 'src' of 'img' to play
     img.src = playSrc;
     // first 'audio' element on the page
     var audio = document.getElementsByTagName( "audio" )[ 0 ];
     // set src attribute of first audio element to random src from audios array
     audio.src = audios[ Math.round( Math.random() * ( audios.length - 1 ) ) ];
     // when current audio ends
     audio.addEventListener( "ended", function( event ) {
        // first 'img' element on the page
        var img = document.getElementsByTagName( "img" )[ 0 ];
        // set 'src' of 'img' to play
        img.src = playSrc;
        // event.taget = our 'audio' tag
        // set 'src' attribute of 'audio' tag to random src from 'audios' array
        event.target.src = audios[ Math.round( Math.random() * ( audios.length - 1 ) ) ];
     } );
    } );
    function playPause( img ) {
    // first 'audio' element on the page
    var audio = document.getElementsByTagName( "audio" )[ 0 ];
    // if audio on pause
    if ( audio.paused ) {
        // start play
        audio.play();
        // set 'src' of 'img' to pause
        img.src = pauseSrc;
    // if audio playing
    } else {
        // set audio on pause
        audio.pause();
        // set 'src' of 'img' to play
        img.src = playSrc;
    }
    }
    In simple words what I want to do is:
    1. I want to have 4 buttons (not as input type=button but as img)
    2. each one should have single audio applied from the above array to it example: img id="playAud1" src="play.gif" should play first track from the array only.
    3. and have the above functionality. i.e. play/pause and change back to play.gif icon after finished playing

    my attempt which for some reason isn't working. although I think it's because I don't specify the array item correctly:

    HTML/Javascript:
    Code:
    <img id="playAud1" src="play.gif">
    <img id="pauseAud1" src="pause.gif">
    
    <img id="playAud2" src="play.gif">
    <img id="pauseAud2" src="pause.gif">
    
    <img id="playAud3" src="play.gif">
    <img id="pauseAud3" src="pause.gif">
    
    <img id="playAud4" src="play.gif">
    <img id="pauseAud4" src="pause.gif">
    
    
    <script type="text/javascript">
    var pics = document.querySelectorAll("img[src*='play.gif']");
    for (var a = 0; a < pics.length; a++) {
    pics[a].onclick= playAud;
    }
    
    function playAud()
    {
    var playid = this.id.replace("playAud","audio");
    document.getElementById(playid).play();
    this.style.display = "none";
    var pauseid = this.id.replace("playAud","pauseAud");
    document.getElementById(pauseid).style.display = "inline";
    }
    </script>
    
    <script type="text/javascript">
    var pausedpics = document.querySelectorAll("img[src*='pause.gif']");
    for (var a = 0; a < pausedpics.length; a++) {
    pausedpics[a].onclick= pausedAud;
    }
    
    function pauseAud()
    {   
    var pauseid = this.id.replace("pauseAud","audio");
    document.getElementById(pauseid).pause();
    this.style.display = "none";
    var playid = this.id.replace("pauseAud", "playAud");
    document.getElementById(playid).style.display = "inline";
    }
    </script>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,118
    Thanks
    80
    Thanked 4,555 Times in 4,519 Posts
    Before I play with this, I'd like to suggest an improvement: I'd like to see an ADDITIONAL image: "play_disabled.gif"

    So when any PLAY button has been pushed, all the other play buttons convert to "play_disabled"
    and indeed *ARE* disabled until the currently playing song/file is complete.

    ALTERNATE: Don't have any disabled buttons. But now when a play button is pushed
    when a song is already playing (or even paused!) that song is terminated before
    the new song starts playing.

    You NEED one of the above two alternatives to make this work right, don't you??
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,118
    Thanks
    80
    Thanked 4,555 Times in 4,519 Posts
    But I have to say, I don't see any error in what you have there.

    What does your JS debugger say is the problem?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    New Coder
    Join Date
    Jun 2014
    Posts
    17
    Thanks
    4
    Thanked 0 Times in 0 Posts
    im not enough advanced for this but from what i see its great coding so far ! ^^

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Why do you have one antiquated onclick in the HTML when all the other event processing is done properly using event listeners?
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,989
    Thanks
    56
    Thanked 557 Times in 554 Posts
    maybe something like this?

    Code:
    <!DOCTYPE html>
    <html>
    
    <head>
    <style>
    img{cursor:pointer}
    </style>
    </head>
    
    <body>
    <audio id="aud"></audio>
     <img src="http://upload.wikimedia.org/wikipedia/commons/9/96/Crystal_Project_Player_play.png">
     <img src="http://upload.wikimedia.org/wikipedia/commons/9/96/Crystal_Project_Player_play.png">
     <img src="http://upload.wikimedia.org/wikipedia/commons/9/96/Crystal_Project_Player_play.png">
    
    <script type="text/javascript">
    (function () {
        var tracks = [ "https://raw.githubusercontent.com/CreateJS/SoundJS/master/examples/assets/Game-Shot.ogg", 
    	"https://raw.githubusercontent.com/CreateJS/SoundJS/master/examples/assets/Game-Death.ogg", 
    	"https://raw.githubusercontent.com/CreateJS/SoundJS/master/examples/assets/Game-Spawn.ogg", 
    	"https://raw.githubusercontent.com/CreateJS/SoundJS/master/examples/assets/Game-Break.ogg" ];
    	var playsrc="http://upload.wikimedia.org/wikipedia/commons/9/96/Crystal_Project_Player_play.png";
    	var pausesrc="http://upload.wikimedia.org/wikipedia/commons/d/dd/Crystal_Project_Player_pause.png";
        var playing = null;
    	var player=document.getElementById("aud");
        var pics = document.querySelectorAll("img[src*='play.png']");
        for (var i = 0; i < pics.length; i++) {
            pics[i].onclick = (function (i) {
    		return function() {
                    if (this.src.indexOf("play.png") != -1) {
                        this.src = pausesrc;
                        if (playing) {
                         playing.src = playsrc;
                        }
                        playing = this;
                        player.pause();
                        player.src =  tracks[i];
                        player.play();
                    } else {
                        this.src = playsrc;
                        player.pause();
                        playing = null;
                    }
                }
    		})(i);	
        }
    player.onpause=function (){
    playing.src = playsrc;
    playing = null;
    }
    })();
    
    </script>
    </body>
    </html>
    Last edited by xelawho; 07-20-2014 at 10:08 AM.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •