how to use jplayer in ASP.NET and read data from sql to play with Jplayer

[Rebwar Poori]

Hi everyone,
some one help me to use jplayer in asp.net(i do that)for read data
from sql and play with jplayer.
let's describe my problem.
i want to upload music from site and dynamically play this sound,i
have a data control like repeater,gridview,... now how can i do this.
tnx.

[Ian Sharpe]

Hi Rebwar

Can you be a little more specific with what you are trying to do please?

In general though, if you have the urls to sound files stored in SQL Server
and want to allow a user to listen to them by selecting items in a GridView
control or Repeater, you could embed the URLs in the HTML generated for each
row or item template and use javascript to pass the URLs to a jplayer. There
are many many ways to do this but you could simply use the href attribute of
a link to pass the URL to the jPlayer play function. Something like:

<itemtemplate>
<a href="$('#jplayerid').play({mp3: '<%# Bind("url") %>'});return
false;">Play</a>
...

But if you can be more specific we should be able to point you in the right
direction.

Cheers
Ian

--
You received this message because you are subscribed to the Google Groups
"jPlayer: HTML5 Audio & Video for jQuery" group.
To post to this group, send email to jpl...@googlegroups.com.
To unsubscribe from this group, send email to
jplayer+u...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/jplayer?hl=en.

[Rebwar Poori]

Tnx lan for your replay,

i want to create a project,that's allows users to upload a sound i know how to implement this but the question is how can i show the sounds users uploaded, lets show you a similar project http://www.soundsofmychildhood.com/ . in this project you can upload a sound and it's can play by jplayer,in the home page u see more sounds have been uploaded and ready to listen it,now i want to create some project in asp.net and when i use a data control like repeater or... and want to send url to jplayer function it's not play:

$(document).ready(function() {

var mp3Url = $('HyperLink1').val();
  $("#jpId").jPlayer( {

 
    ready: function () {

      $(this).jPlayer("setMedia", {

        mp3: mp3Url
      });

    }
  });
});

<asp:hyperlink id="HyperLink1"  runat="server" text="<%#Eval(SoundURL)%>"/>
--
Best regards,Rebwar H Poori
http://rebwar.mp
http://aspdotnet.blogfa.com
http://www.facebook.com/rebwar.poori

You can follow me on twitter:
http://twitter.com/Rebvar

[Ian Sharpe]

A few quick thoughts:

 

1. Have you checked that the contents of mp3Val is the correct url to your sound file?

 

2. And this is possibly the most likely reason for sound not playing, is the server which is hosting your sound files configured to support streaming and in particular, streaming mp3 files if that is the format of the files on your site? You can check this by simply pasting the URL into your browser's address bar. If you see a dialog which asks you whether you want to save or open the file, streaming is not enabled. There are many ways to set this up and if this is the problem, I'd suggest that you look into this for your setup.

 

3. Which version of jplayer are you using? I initially started using 1.2 and the setMedia command to play files. However, I'm not sure whether this still works in version 2.0. I can't remember the syntax off the top of my head but check the docs for examples using the play method.

 

Hope that helps.

Cheers

Ian

 

---

From: jpl...@googlegroups.com [mailto:jpl...@googlegroups.com] On Behalf Of Rebwar Poori

Sent: 26 April 2012 06:48
To: jpl...@googlegroups.com
Subject: Re: [jPlayer] how to use jplayer in ASP.NET and read data from sql to play with Jplayer

[Rebwar Poori]

here's my code:

<script type="text/javascript">
//<![CDATA[
    $(document).ready(function () {
        $("#jquery_jplayer_1").jPlayer({

            ready: function () {
                $(this).jPlayer("setMedia", {

                    mp3: $('a[id*=Label1]').val()
                });
            },
            swfPath: "js/",
            supplied: "mp3",
            wmode: "window"
        });

        $("#jplayer_inspector").jPlayerInspector({ jPlayer: $("#jquery_jplayer_1") });
    });
//]]>
</script>

    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
        DataKeyNames="Id" DataSourceID="SqlDataSource1">
        <Columns>
            <asp:TemplateField>
            <ItemTemplate>

                <asp:Label ID="Label1" runat="server" Text='<%#Eval("MusicUrl") %>'></asp:Label>
                        <div id="jp_container_1"  class="jp-audio" >
            <div class="jp-type-single">
                <div class="jp-gui jp-interface">
                    <ul class="jp-controls">
                        <li><a href="javascript:;" class="jp-play" title="Play" tabindex="1">play</a></li>
                        <li><a href="javascript:;" class="jp-pause" title="pause" tabindex="1">pause</a></li>
                        <li><a href="javascript:;" class="jp-stop" title="stop" tabindex="1">stop</a></li>
                        <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
                        <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
                        <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
                    </ul>
                    <div class="jp-progress">
                        <div class="jp-seek-bar" title="1">
                            <div class="jp-play-bar" ></div>

                        </div>
                    </div>
                    <div class="jp-volume-bar">
                        <div class="jp-volume-bar-value"></div>
                    </div>
                    <div class="jp-current-time"></div>
                    <div class="jp-duration"></div>
                    <ul class="jp-toggles">
                                            </ul>
                </div>
                <div class="jp-title">
                    <ul>
                        <li>Cro Magnon Man</li>
                    </ul>
                </div>
                <div class="jp-no-solution">
                    <span>Update Required</span>
                    To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
                </div>
            </div>
        </div>

            </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server"
        ConnectionString="<%$ ConnectionStrings:testConnectionString %>"
        SelectCommand="SELECT [MusicUrl], [Artist], [Id] FROM [T1] ORDER BY [Id] DESC">
    </asp:SqlDataSource>

somebody help me please.

[Rebwar Poori]

i change the code and it's play sounds but only play last url have saved in database.
for example if 20 record saved into Database jplayer only play last record.
any idea to fix it?

here's my code:
<script type="text/javascript">
//<![CDATA[
    $(document).ready(function () {
        $("#jquery_jplayer_1").jPlayer({
   
            ready: function () {
                $(this).jPlayer("setMedia", {

                    mp3: $("#<%=GridView1.ClientID%> input[id*='Label1']:text").val()
                });
            },
            swfPath: "http://rebwar.ir/jplayer/js/",

            supplied: "mp3",
            wmode: "window"
        });

        $("#jplayer_inspector").jPlayerInspector({ jPlayer: $("#jquery_jplayer_1") });
    });
//]]>
</script>
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
        DataKeyNames="Id" DataSourceID="SqlDataSource1">
        <Columns>
            <asp:TemplateField>
            <ItemTemplate>

                <input type="text"  ID="Label1"  runat="server" value='<%#Eval("MusicUrl") %>' />

[Ian Sharpe]

You're adding the markup for a new instance of jplayer in each template and only instancing one of them.

 

Rather than adding multiple jplayer instances, Add the jplayer markup outside of the gridview and pass the url of the required file to it's play method based on some action, ie clicking a link or button in each row.

 

---

From: jpl...@googlegroups.com [mailto:jpl...@googlegroups.com] On Behalf Of Rebwar Poori

Sent: 26 April 2012 16:46

To: jpl...@googlegroups.com
Subject: Re: [jPlayer] how to use jplayer in ASP.NET and read data from sql to play with Jplayer

--
You received this message because you are subscribed to the Google Groups "jPlayer: HTML5 Audio & Video for jQuery" group.

To view this discussion on the web visit https://groups.google.com/d/msg/jplayer/-/wqPkAM2_s00J.

[Kyle Morton]

  

Sent from my iPhone

[Rebwar Poori]

thank you lan for help me in this problem.
when i add the markup of jplayer instance into template,that's repeat last record from DB,but when i use the markup of jplayer outside of grid view template there is nothing for show on the screen,can u describe how to get data from Db and shown all of this record into grid view and when u push the play button from one of them that's play only it u click on play button,
cheers

On Thursday, April 26, 2012 9:15:47 PM UTC+4:30, Presto wrote:

You're adding the markup for a new instance of jplayer in each template and only instancing one of them.

 

Rather than adding multiple jplayer instances, Add the jplayer markup outside of the gridview and pass the url of the required file to it's play method based on some action, ie clicking a link or button in each row.

 

---

From: jpl...@googlegroups.com [mailto:jplayer@googlegroups.com] On Behalf Of Rebwar Poori

To unsubscribe from this group, send email to jplayer+unsubscribe@googlegroups.com.