3 Replies Latest reply on Jul 5, 2015 9:55 AM by Nancy OShea

    html5 player duplicate but want unique content

    r_tist Level 1

      Hi,

       

      If I have an HTML5 player on a page with a playlist of mp3s it pulls in that can be played; but now I want to duplicate the player + switch out the content (the mp3s) for the second instance (think different genres of music, for example in their own player on the same web page)...The second instance of the player forces it to play the first player's playlist. Do I need to "custom class" the player to resolve the issue?

       

      I was thinking the overarching player could be duplicated and it would 'know' by reading the lists of mp3s called up within HTML to play the second list.

       

      Would unique name for the player each time I duplicate it solve the problem?

      Thank you!

        • 1. Re: html5 player duplicate but want unique content
          Nancy OShea Adobe Community Professional & MVP

          Would unique name for the player each time I duplicate it solve the problem?

          Yes.  A unique player ID would be necessary.

           

          But if your player supports playlists, wouldn't it be better to put music into folders by genre instead of having separate players?

           

          Nancy O.

          • 2. Re: html5 player duplicate but want unique content
            r_tist Level 1

            Hi!

            So I tried a couple times - once duplicating the class 'MusicPlayer' with a second instance called musicPlayerTwo as it's living within its own div of content, below this one...  Then I tried the same but applied just to the div called 'player'; tried a second instanced called 'playerTwo' (just for testing). Both of these attempts revealed the first track from the first player & the first track from the second player side-by-side titles in BOTH players. - Hope that makes sense. It seems to detect them as two of the same if you see what I mean. When I click play btn, the first track of first player plays - regardless of if first or second player. I am next going to try to see if I have any luck with the "playlist hidden".

             

            Have you any other ideas how I can sort this out? I am deliberately calling in specific mp3s so don't know why this is happening.

             

            <div class="musicPlayer">

               <div class="player">

                        <div class="pl"></div>

                        <div class="title"></div>

                        <div class="artist"></div>

                        <div class="controls">

                            <div class="play"></div>

                            <div class="rew"></div>

                            <div class="fwd"></div>

                           <div class="pause"></div>

                        </div>

                        <div class="volume"></div>

                        <div class="tracker"></div>

                  </div>

                    <ul class="playlist hidden">

                                <li audiourl="Waterway.mp3" artist="Artist Name Here">Waterway</li>

                           ...so on and so forth...

                      </ul>

             

            I hope this gives you a better idea. Thank you!

            • 3. Re: html5 player duplicate but want unique content
              Nancy OShea Adobe Community Professional & MVP

              Use unique IDs instead of classes.

               

              <div id="player1">

              </div>

               

              <div id="player2">

              </div>