HTML5 MP3 Player Support Product Page

This topic was archived by Teodor Kuduschiev on 3/14/2024 3:37:40 PM

How do a set up which no. to play using the behavior 'Control HTML5 MP3 Player'?

Asked 13 Feb 2011 12:10:37
1
has this question
13 Feb 2011 12:10:37 Bjarke Jørgensen posted:
Hi!
I have build a web-app utilizing htlm5, jQTouch and your MP3 player.
I have incorporated the HTML5 Player with my own skin and a list of 3 mp3 files to play.
From another place in the structure I want to link to one of these mp3-files and make it play.
Using the Behaviors: 'Control HTML5 MP3 Player' I manage to link to the Player, the Action: Play, but NOT to the NUMBER to play.
How do a set up which number to play using the behavior 'Control HTML5 MP3 Player'?

Replies

Replied 15 Feb 2011 16:37:07
15 Feb 2011 16:37:07 Miroslav Zografski replied:
Hello Bjarke,

You need to set up two behaviors - one to go to a song and two to start the player. So in order to do this you firstly assign a "Go To Song" action and you enter the number from 0 for the first song and so on...
Then you apply second behavior with "Play" action.

Regards,
Replied 16 Feb 2011 14:35:36
16 Feb 2011 14:35:36 Bjarke Jørgensen replied:
Thanks! It's working fine now! But I had to manually input the no (0,1,2, etc) to play when choosing the PLAY behavior.

Yours Bjarke
Replied 17 Feb 2011 11:27:40
17 Feb 2011 11:27:40 Miroslav Zografski replied:
Hello Bjarke,

Can you please be more specific? Why you needed to input the index manually and more important - where?

Regards,
Replied 17 Feb 2011 12:21:46
17 Feb 2011 12:21:46 Bjarke Jørgensen replied:
Hello again!

Here is a copy of the code:

-----------------------


<div id="listen">
  <div class="toolbar">
    [h1]Yoga Nidra[/h1]
    <a class="back" href="#">Back</a> <a class="button slideup" href="#about">About</a>
  </div>
  <div class="content">
	<p>[img]images/uk-cover.png" alt="Yoga Nidra Cover" width="33%" height="auto" class="imgleft"><strong>Swami Janakananda</strong></p>
    [h4]Experience Yoga Nidra [/h4]
    <p>With Music by Roop Verma</p>
    <p style="clear:left; padding-top:20px">Begin with "The Wholeness of Your Nature". Only when you have grown used to it and have felt the results, are you then ready to experience "Discover Your Self", the deep Yoga Nidra.</p>
  </div>
    <ul class="edgetoedge">
      <li style="background-color:#E4E4E4; font-size:13px"><a href="#experience" class="slide" onClick="dmxHTML5MP3PlayerAction('yn1','go',0)">1. The Wholeness of Your Nature<span style="float:right; color:#999">21:03</span></a>[/*]
      <li style="font-size:13px"><a href="#experience" class="slide" onClick="dmxHTML5MP3PlayerAction('yn1','go',1)">2. Through the Space of Experience<span style="float:right; color:#999">7:05</span></a>[/*]
      <li style="background-color:#E4E4E4; font-size:13px"><a href="#experience" class="slide" onClick="dmxHTML5MP3PlayerAction('yn1','go',2)">3. Discover Your Self<span style="float:right; color:#999">45:13</span></a>[/*][/list]
</div>
<div id="experience">
<div class="dmxHTML5MP3Player apple" id="yn1">
  <div class="toolbar">
    <div><a class="back" href="#">Back</a></div>
    <div class="dmxHTML5MP3PlayerDisplay"> <span class="dmxHTML5MP3PlayerInfo"><strong>##time##</strong> ##title## <span style="float:right">##remaining##</span></span> </div>
  </div>
  [img]images/uk-play-cover.png" width="100%" height="auto">
  <div style="bottom:75%" class="dmxHTML5MP3PlayerPositionSlider">
    <div class="dmxHTML5MP3PlayerPositionBar"></div>
    <div class="dmxHTML5MP3PlayerPositionHandle"></div>
  </div>
  <div class="dmxHTML5MP3PlayerPlaylist" style="display:none">
    <ol>[*]<a href="mp3/1-the-wholeness-of-your-nature.mp3" onClick="dmxHTML5MP3PlayerAction('yn1','play',0)">The Wholeness of your ...</a><span style="float:right">21:03</span>[/*][*]<a href="mp3/2-a-travel-through-the-space-of-experience.mp3" onClick="dmxHTML5MP3PlayerAction('yn1','play',1)">Travel through the Space ...</a><span style="float:right">7:05</span>[/*][*]<a href="mp3/3-discovery-of-your-self.mp3" onClick="dmxHTML5MP3PlayerAction('yn1','play',2)">Discover Your Self</a><span style="float:right">45:13</span>[/*]
    </ol>
  </div>
  <div style="margin-top:-37px" class="dmxHTML5MP3PlayerControlbar"> <a href="#" class="dmxHTML5MP3PlayerBtnPrev"></a> 
  <span class="dmxHTML5MP3PlayerPlayPause"> <a href="#" class="dmxHTML5MP3PlayerBtnPlay"><span></span></a> <a href="#" class="dmxHTML5MP3PlayerBtnPause"><span></span></a>
  <!--<a href="#" class="dmxHTML5MP3PlayerBtnPlay"></a> <a href="#" class="dmxHTML5MP3PlayerBtnPause"> </a> -->
  <a href="#" class="dmxHTML5MP3PlayerBtnNext"></a> 
  <div class="dmxHTML5MP3PlayerVolumeSlider">
      <div class="dmxHTML5MP3PlayerVolumeBar"></div>
      <div class="dmxHTML5MP3PlayerVolumeHandle"></div>
  </div>
  </div>
</div>
<script type="text/javascript">
  // <![CDATA[
 jQuery(document).ready(
   function()
     {
       jQuery("#yn1").dmxHTML5MP3Player(
         {autoNext:false, loop:false, playlist:"a[href$=\".mp3\"]"}
       );
     }
 );
  // ]]>
</script>
</div>


-----------------------

as you can see I am linking to the 'yn1' and the no. to go to in the first DIV. In the second DIV asking that no. to play. The no. 0, 1 and 2 to play I had to insert manually.

Yours Bjarke
Replied 23 Feb 2011 16:08:15
23 Feb 2011 16:08:15 Miroslav Zografski replied:
Hello Bjarke,

In fact you should not do this like that. Instead you need to apply once Play behavior ( without the number ) and then apply Go To behavior (and enter the number there in the UI manually). there is no automatic assignment of the numbers.

Regards,
Replied 17 May 2011 23:13:19
17 May 2011 23:13:19 Tim miller replied:
Hi - I think I'm missing a step here. Can you take a look and let me know where I;'m going wrong? I'd like it to load the player, jump to the 3rd song in the list, then begin playing.



<script type="text/javascript">
  // <![CDATA[
 jQuery(document).ready(
   function()
     {
       jQuery("#mp3PlayerMatt").dmxHTML5MP3Player(
         {autoPlay:true, playlist:"a[href$=\".mp3\"]", onPlay:"dmxHTML5MP3PlayerAction('mp3PlayerMatt','position',2);dmxHTML5MP3PlayerAction('mp3PlayerMatt','play');"}
       );
     }
 );
  // ]]>
</script>

This reply was removed on 3/14/2024 3:37:38 PM.
See the changelog

Reply to this topic