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 5 of 5

Thread: Audio.js

  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Audio.js

    I have audio.js installed in my header then a html5 audio element directly under it, which works perfectly. I have other html5 audio elements on body and index pages that i don't want it to affect how would i only tell it to effect that specfic element and nothing else? i tried

    Code:
    $("#someid").show()
    and it didn't work with
    Code:
    <div id="someid">
    this is how i have audio.js set up

    Code:
    <div id="someid">
    <script src="/audiojs/audio.min.js"></script>
    <script>
      audiojs.events.ready(function() {
        var as = audiojs.createAll();
    $("#someid").show()
      });
    </script>
    
    <audio src="http://majestic.wavestreamer.com:5473/stream.mp3" type="audio/mpeg" preload="auto" /></div>
    I've also tried putting the js script in the header and othe rplaces along with being outside the div itself still nothing.

    i just want it to affect this specifically below.

    Code:
    <audio src="http://majestic.wavestreamer.com:5473/stream.mp3" type="audio/mpeg" preload="auto" /></div>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,901
    Thanks
    79
    Thanked 4,422 Times in 4,387 Posts
    Well, first of all, whether or not the <div> shows will have no impact whatsoever on the audio playing or not.

    There's nothing wrong with putting an audio control into an invisible element.

    But your code couldn't have affected the visibility of the <div id="someid"> because until the </div> appears that completes that <div>, the element doesn't exists, so the JS code can't find it.

    But the other thing is: I've never seen an <audio> tag like that one.

    Normally, you would do:
    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <audio controls preload="auto">
       <source src="http://majestic.wavestreamer.com:5473/stream.mp3" type="audio/mpeg"  />
       audio not supported?
    </audio>
    </body>
    </html>
    (Except that MSIE doesn't support preload.)

    To see what I mean about the display of the surrounding <div> not affecting the audio, try this page:
    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <div style="display: none;">
    <audio controls autoplay>
       <source src="http://majestic.wavestreamer.com:5473/stream.mp3" type="audio/mpeg"  />
       audio not supported?
    </audio>
    </div>
    </body>
    </html>
    Anyway... Just WHAT are you trying to control? You want to start the audio? Stop it? Disable it? Or what?
    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
    25,901
    Thanks
    79
    Thanked 4,422 Times in 4,387 Posts
    I will say that, in Chrome, at least, your version of the <audio> tag works if you set it to autoplay:
    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <div>
    <audio src="http://majestic.wavestreamer.com:5473/stream.mp3" type="audio/mpeg" autoplay />
    </div>
    </body>
    </html>
    But then there is no visible audio control. (Perhaps that's what you want? But it won't work in all browsers.)
    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
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,373
    Thanks
    11
    Thanked 591 Times in 572 Posts
    Quote Originally Posted by Old Pedant View Post
    But then there is no visible audio control. (Perhaps that's what you want? But it won't work in all browsers.)

    easy to fix:
    Code:
    <audio 
     src="http://majestic.wavestreamer.com:5473/stream.mp3"
     type="audio/mpeg"
     autoplay
     controls
     ></audio>
    not sure what OP means by 'affect', audio.js is a patch for browsers that don't support audio tags, without it, older browsers can't play the audio.
    Last edited by rnd me; 04-27-2013 at 04:41 AM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,901
    Thanks
    79
    Thanked 4,422 Times in 4,387 Posts
    Quote Originally Posted by rnd me View Post
    not sure what OP means by 'affect', audio.js is a patch for browsers that don't support audio tags, without it, older browsers can't play the audio.
    Ahhh...I see. But then why not just fall back to an older tag? <object> or <embed>? Hmmm...presumably that's what audio.js actually does. Okay, makes sense.
    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.


  •  

    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
    •