How to insert multiple instances of audio.js on same page?

Discussion in 'JavaScript' started by Filip Muller, Nov 7, 2013.

0
  1. #1
    Hello,

    i am quite a non-connaisseur of javascript, but i want to implement the audio.js plugin into a personal wordpress project and i have some trouble in implementing it.

    i need to insert on the same page, multiple instances of what is between the body tags below:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script src="audiojs/audio.min.js"></script>
  </head>
  <body>
    <div id="player1">
      <audio preload></audio>
      <ul>
        <li><a href="#" data-src="http://s3.amazonaws.com/audiojs/01-dead-wrong-intro.mp3">dead wrong intro</a></li>
        <li><a href="#" data-src="http://s3.amazonaws.com/audiojs/02-juicy-r.mp3">juicy-r</a></li>
        <li><a href="#" data-src="http://s3.amazonaws.com/audiojs/03-its-all-about-the-crystalizabeths.mp3">it's all about the crystalizabeths</a></li>
      </ul>
    </div>
    <script>
      $(function() {
        var a = audiojs.createAll({
          trackEnded: function() {
            var next = $('ul li.playing').next();
            if (!next.length) next = $('ul li').first();
            next.addClass('playing').siblings().removeClass('playing');
            audio.load($('a', next).attr('data-src'));
            audio.play();
          }
        });
        var audio = a[0];
            first = $('ul a').attr('data-src');
        $('ul li').first().addClass('playing');
        audio.load(first);
        $('ul li').click(function(e) {
          e.preventDefault();
          $(this).addClass('playing').siblings().removeClass('playing');
          audio.load($('a', this).attr('data-src'));
          audio.play();
        });
      });
    </script>
</body>
</html>
    HTML:
    I want to make a wordpress shortcode with the player, and the ID of the returning div, needs to be populated dynamicaly.

    something like this:

    
[player id="player1"]
        [mp3 src="path-to-mp3" title="mp3 title"]
        [mp3 src="path-to-mp3" title="mp3 title"]
        [mp3 src="path-to-mp3" title="mp3 title"]
[/player]
    HTML:
    would return something like this:

    
<div id=" ' . $id . ' ">
...
</div>
<script>
... ' . $id . ' ...
</script>
    HTML:
    where the "id=" that i type in the shortcode, would populate the div $id, and the js under it.

    do you think somethink like this is do-able?

    i know how to make the shortcode, but i can't figure out how to make multiple and separate sessions of that js under the div, one for each player on the page.

    i really hope it makes sense what i want to achieve

    if you can point me in the right direction i would very much apreciate it

    thank you in advance
     
    Filip Muller, Nov 7, 2013 IP
  2. shek

    shek Well-Known Member

    Messages:
    266
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #2
    My suggestion would be to merge your audio files and run it in loop ;), as it will solve your problem. But if you are looking for alternative way, I would recommend you to visit codeclerks.com and order a gig for yourself.
     
    shek, Nov 8, 2013 IP
  3. Filip Muller

    Filip Muller Greenhorn

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #3
    hello shek, thank you for your answer,

    well the merging wont solve my problem, because i need to add multiple players on the same page, each one with his own playlist.

    at the moment, when i add the second player, all the tracks from its playlist are playable, but they are playing in the first player on the page while the second player has an infinite loading icon instead of the play icon.

    the ultimate solution would be indeed a gig, but i am also trying to learn something from this :)

    thank you again
     
    Filip Muller, Nov 8, 2013 IP