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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    New Coder
    Join Date
    Jul 2014
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Lightbulb javascript simple switch-statement help

    I am trying to create a switch-statement to play a clicked song. So far, this is what I've come up with. However, the code doesn't seem to work. Nothing happens when a button is clicked and it's really confusing me, I have searched for solutions to this for couple hours prior to posting this without any success.

    Solution can either be in javascript or jquery

    ps. I have replaced the AUDIO SRC with xxx.

    HTML Code:

    Code:
    <audio id="audiotag1" src="xxx" preload="auto"></audio>
    <audio id="audiotag2" src="xxx" preload="auto"></audio>
    <audio id="audiotag3" src="xxx" preload="auto"></audio>
    
    <a href="javascript:;">
        <img id="playAud1" src="img/play.gif">
    </a>
    
    <a href="javascript:;">
        <img id="playAud2" src="img/play.gif">
    </a>
    
    <a href="javascript:;">
        <img id="playAud3" src="img/play.gif">
    </a>
    JavaScript Code:

    Code:
      $("img[id*=‘play’]").click(function(){
    
    switch ($(this).attr("id")) {
    case 'playAud1':
       document.getElementById("#audiotag1").play();
        break;
    case 'playAud2':
       document.getElementById("#audiotag2").play();
        break;
    case 'playAud3':
        document.getElementById("#audiotag3").play();
        break;
    default:
        document.write("click track to play");
    }
    });

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    probably it's a simple matter of the curly quotes here:
    Code:
    [id*=‘play’]
    which should be
    Code:
    [id*='play']
    but really, you seem to be over-complicating things. Why are you wrapping your images in <a> tags? - you could do the same, without jQuery by just doing this:
    Code:
    <head>
    <style>
    img{cursor:pointer}
    </style>
    </head>
    
    <body>
    <audio id="audiotag1" src="xxx" preload="auto"></audio>
    <audio id="audiotag2" src="xxx" preload="auto"></audio>
    <audio id="audiotag3" src="xxx" preload="auto"></audio>
     <img id="playAud1" src="img/play.gif">
     <img id="playAud2" src="img/play.gif">
     <img id="playAud3" src="img/play.gif">
    
    <script type="text/javascript">
    var pics=document.querySelectorAll("img[src*='img/play.gif']");
    for (var i = 0; i < pics.length; i++) {
    pics[i].onclick=playAu;
    }
    
    function playAu(){
    var theid=this.id.replace("playAud","audiotag");
    document.getElementById(theid).play();
    }
    
    </script>
    </body>

  • Users who have thanked xelawho for this post:

    Tell (07-17-2014)

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Alternative solution without attaching onclick event to each image.
    Code:
    <audio id="audiotag1" src="xxx" preload="auto"></audio>
    <audio id="audiotag2" src="xxx" preload="auto"></audio>
    <audio id="audiotag3" src="xxx" preload="auto"></audio>
    
    <div id="playContainer">
        <img id="playAud1" src="img/play.gif" alt="Play" />
        <img id="playAud2" src="img/play.gif" alt="Play" />
        <img id="playAud3" src="img/play.gif" alt="Play" />
    </div>
    
    <script>
    (function(){
    	document.getElementById('playContainer').onclick = function(e) {
    		e = e || window.event;
    		var target = e.target || e.srcElement;
    		if (target.id.indexOf('playAud') === 0) {
    			document.getElementById(target.id.replace('playAud', 'audiotag')).play();
    		}
    	}
    
    })();
    </script>
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • Users who have thanked glenngv for this post:

    Tell (07-17-2014)

  • #4
    New Coder
    Join Date
    Jul 2014
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    thanks a lot guys, both solutions are working

  • #5
    New Coder
    Join Date
    Jul 2014
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    so i've been playing with the code and added another function to pause the already playing track. However, I am struggling to hide the icon of currently playing song and show a pause icon

    i.e. when playAud() is clicked:
    document.getElementById( img/play.gif - should be hidden ).style.display = "none";
    document.getElementById( img/pause.gif - should be shown ).style.display = "block";

    and then when pausAud() is clicked:
    document.getElementById( img/pause.gif - should be hidden ).style.display = "none";
    document.getElementById( img/play.gif - should be shown ).style.display = "block";

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,933
    Thanks
    79
    Thanked 4,424 Times in 4,389 Posts
    A perhaps easier way would be to simply change the image's src

    But I see no reason that what you are showing couldn't work.

    Show your real code? Including the two images.
    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.

  • #7
    New Coder
    Join Date
    Jul 2014
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Code:
    <script type="text/javascript">
    var pics=document.querySelectorAll("img[src*='img/play.gif']");
    for (var i = 0; i < pics.length; i++) {
    pics[i].onclick=playAu;
    }
    it works only if I specify the ID manually i.e.:
    Code:
    function playAu(){
    var theid=this.id.replace("playAud","audiotag");
    document.getElementById(theid).play();
    document.getElementById("playAud1").style.display = "none";
    }
    doesn't work
    Code:
    function playAu(){
    var theid=this.id.replace("playAud","audiotag");
    document.getElementById(theid).play();
    document.getElementById(theid).style.display = "none";
    }

  • #8
    New Coder
    Join Date
    Jul 2014
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    full code:

    Code:
    <audio id="audiotag1" src="xxx" preload="auto"></audio>
    <audio id="audiotag2" src="xxx" preload="auto"></audio>
    <audio id="audiotag3" src="xxx" preload="auto"></audio>
    
     <img id="playAud1" src="img/play.gif">
     <img id="playAud2" src="img/play.gif">
     <img id="playAud3" src="img/play.gif">
     
     <img id="pause1" src="img/pause.gif">
     <img id="pause2" src="img/pause.gif">
     <img id="pause3" src="img/pause.gif">
    
    
    <script type="text/javascript">
    
    var pics=document.querySelectorAll("img[src*='img/play.gif']");
    for (var i = 0; i < pics.length; i++) {
    pics[i].onclick=playAu;
    }
    
    var theid=this.id.replace("playAud","audiotag");
    document.getElementById(theid).play();
    var imgId=this.id.replace("playAud");
    document.getElementById(imgId).style.display = "none";
    
    }
    
    </script>
    
    
    <script type="text/javascript">
    
    var pausedpics = document.querySelectorAll("img[src*='img/pause.gif']");
    for (var l = 0; l < pausedpics.length; l++) {
    pausedpics[l].onclick=paused;
    }
    	
    	function paused(){
    var teid=this.id.replace("pause","audiotag");
    document.getElementById(teid).pause();
    
    }
    
    </script>

  • #9
    New Coder
    Join Date
    Jul 2014
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    sorry, complete code here. I have made test.html and working project. so ignore the last post.

    Code:
    <audio id="audiotag1" src="xxx" preload="auto"></audio>
    <audio id="audiotag2" src="xxx" preload="auto"></audio>
    <audio id="audiotag3" src="xxx" preload="auto"></audio>
    
    
     <img id="playAud1" src="img/play.gif">
     <img id="playAud2" src="img/play.gif">
     <img id="playAud3" src="img/play.gif">
     
     <img id="pause1" src="img/pause.gif">
     <img id="pause2" src="img/pause.gif">
     <img id="pause3" src="img/pause.gif">
    
    
    <script type="text/javascript">
    
    var pics=document.querySelectorAll("img[src*='img/play.gif']");
    for (var i = 0; i < pics.length; i++) {
    pics[i].onclick=playAu;
    }
    function playAu(){
    var theid=this.id.replace("playAud","audiotag");
    document.getElementById(theid).play();
    var imgId=this.id.replace("playAud");
    document.getElementById(imgId).style.display = "none";
    }
    
    </script>
    
    
    <script type="text/javascript">
    
    var pausedpics = document.querySelectorAll("img[src*='img/pause.gif']");
    for (var l = 0; l < pausedpics.length; l++) {
    pausedpics[l].onclick=paused;
    }
    	
    	function paused(){
    var teid=this.id.replace("pause","audiotag");
    document.getElementById(teid).pause();
    
    }
    
    </script>

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,933
    Thanks
    79
    Thanked 4,424 Times in 4,389 Posts
    This is bogus:
    Code:
     var imgId=this.id.replace("playAud");
    the replace method requires *TWO* arguments. The string
    to be replaced AND the replacement string.

    Let's rewrite the playAu() function:
    Code:
    function playAu()
    {
        var playid = this.id.replace("playAud","audiotag");
        document.getElementById(playid).play();
        this.style.display = "none";
        var pauseid = this.id.replace("playAud","pause");
        document.getElementById(pause).style.display = "inline";
    }
    And then of course your HTML needs to be changed to have each pause
    image directly following each play image. Thus:
    Code:
     <img id="playAud1" src="img/play.gif"
    ><img id="pause1" src="img/pause.gif" style="display: none;"
    ><img id="playAud2" src="img/play.gif"
    ><img id="pause2" src="img/pause.gif" style="display: none;"
    ><img id="playAud3" src="img/play.gif"
    ><img id="pause3" src="img/pause.gif" style="display: none;">
    Unless you have some other way to make sure that each pause directly
    replace/lies on top of the corresponding play.
    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.

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,933
    Thanks
    79
    Thanked 4,424 Times in 4,389 Posts
    One difficulty I see with you whole scheme is that you allow all three sounds to be played at the same time.
    And there are no stop buttons.
    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.

  • #12
    New Coder
    Join Date
    Jul 2014
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    little fix with ur code:
    should be: document.getElementById(pauseid).style.display = "inline";
    Code:
        document.getElementById(pause).style.display = "inline";
    thanks, your solution solved the issue.

    about the stop button. ya, i will look into that, will try to alter your current solutions and implement something like stop();

    I have only been learning javascript & jquery for a week so still low on knowledge

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,933
    Thanks
    79
    Thanked 4,424 Times in 4,389 Posts
    Good catch. The pause() function will be a near-clone of the playAu() function,
    just reversing what is displayed and what is not.
    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.

  • #14
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    it may be worth pointing out that you can have just one audio tag and control what it plays by manipulating the src attribute - that would simplify things in terms of overlapping tracks playing, having to know which player was last playing when the user clicks to play another, etc

  • #15
    New Coder
    Join Date
    Jul 2014
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    would that mean i.e.
    create array to store src values
    use innerHTML to insert it based on different button user clicks


  •  
    Page 1 of 2 12 LastLast

    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
    •