RadSlider with audio control

[Bader]

Hello,

I have a problem with using the radslider control.
In the follwong code I'm using the audio control which I downloaded from http://www.aspnetaudio.com/. I need to control the volume using the radslider control, but unfortunatily, every time I try to do that, the mp3 file is restarted.

<%@ Page Title="<%$ Resources:Resource, PagesConcertsAudioTitle %>" Language="C#" MasterPageFile="~/Pages/MasterPages/DefaultMasterPage.master" AutoEventWireup="true" CodeFile="Audio.aspx.cs" Inherits="Pages_Concerts_Audio" %>
<%@ Register Assembly="ASPNetAudio.NET3" Namespace="ASPNetAudio" TagPrefix="ASPNetAudio" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Assembly="ASPNetMediaGUI.NET3" Namespace="ASPNetMediaGUI" TagPrefix="ASPNetMediaGUI" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder3" Runat="Server">
<asp:Panel ID="AudioPanel" style="margin:10px;" runat="server">
    <asp:SqlDataSource ID="CnsrtsSqlDataSource" runat="server"
        ConnectionString="<%$ ConnectionStrings:ZajalCenterConnectionString %>"
        SelectCommand="SELECT * FROM [Cnsrts] WHERE ([CnsrtID] = @CnsrtID)">
        <SelectParameters>
            <asp:QueryStringParameter Name="CnsrtID" QueryStringField="cnsrt"
                Type="Int32" />
        </SelectParameters>
    </asp:SqlDataSource>
    <asp:FormView ID="FormView1" runat="server" DataKeyNames="CnsrtID" Width="100%"
        DataSourceID="CnsrtsSqlDataSource">
        <ItemTemplate>

            <asp:Table ID="Table1" Width="100%" runat="server">
                <asp:TableRow ID="TableRow4" runat="server">
                   <asp:TableCell ID="TableCell3" ColumnSpan="2" runat="server">
                         <asp:Label ID="CnsrtNameLabel1" SkinID="HeaderText" runat="server" Text='<%# Bind("CnsrtName") %>' /><br /><br />
                   </asp:TableCell></asp:TableRow><asp:TableRow ID="TableRow7" runat="server">
                   <asp:TableCell ID="TableCell4" style="width:15%;" runat="server">
                       <asp:Label ID="PoetsLabel" runat="server" Text="<%$ Resources:Resource, PagesConcertsAudioPoetsLabel %>" />
                   </asp:TableCell><asp:TableCell ID="TableCell5" HorizontalAlign="Right" style="width:85%;" runat="server">
                       <asp:Label ID="PoetsDataLabel" runat="server" Text='<%# Bind("Choirs") %>' />
                   </asp:TableCell></asp:TableRow><asp:TableRow ID="TableRow1" runat="server">
                    <asp:TableCell ID="TableCell1" ColumnSpan="2" style="width:60%;" runat="server">
                        <asp:Table ID="Table41" Width="100%" runat="server">
                            <asp:TableRow ID="TableRow2" runat="server">
                                <asp:TableCell>
                                    <telerik:RadAjaxPanel ID="AudioRadAjaxPanel" runat="server">
                                        <asp:Table ID="Table2" Width="100%" runat="server">
                                           <asp:TableRow ID="TableRow9" runat="server">
                                               <asp:TableCell ID="TableCell11" ColumnSpan="2" runat="server">
                                                   <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
                                                       <ASPNetAudio:Audio ID="MediaPlayer1"  runat="server" >
                                                       </ASPNetAudio:Audio>

                                                       <telerik:RadSlider ID="RadSlider_Ticks" runat="server" MinimumValue="0" MaximumValue="100"
                                                            SmallChange="10" LargeChange="10" ItemType="Item" Height="70px" Width="350px"
                                                            AnimationDuration="400" CssClass="TicksSlider" AutoPostBack="true"
                                                        ThumbsInteractionMode="Free" onvaluechanged="RadSlider_Ticks_ValueChanged">
                                                        </telerik:RadSlider>
                                                   </telerik:RadAjaxPanel>
                                               </asp:TableCell>
                                           </asp:TableRow>
                                           <asp:TableRow ID="TableRow5" runat="server">
                                               <asp:TableCell ID="TableCell2" style="width:15%;" runat="server">
                                                   <asp:Label ID="DurationLabel" runat="server" Text="<%$ Resources:Resource, PagesConcertsAudioDurationLabel %>"></asp:Label>
                                               </asp:TableCell>
                                               <asp:TableCell ID="TableCell6" HorizontalAlign="Right" style="width:85%;" runat="server">
                                                   <ASPNetMediaGUI:MediaLabel ID="MediaLabel1" runat="server" AssociatedControl="MediaPlayer1" LabelType="Duration"></ASPNetMediaGUI:MediaLabel>
                                               </asp:TableCell>
                                             </asp:TableRow>
                                             <asp:TableRow ID="TableRow6" runat="server">
                                               <asp:TableCell ID="TableCell7" style="width:15%;" runat="server">
                                                   <asp:Label ID="PositionLabel" runat="server" Text="<%$ Resources:Resource, PagesConcertsAudioPositionLabel %>"></asp:Label>
                                               </asp:TableCell>
                                               <asp:TableCell ID="TableCell8" HorizontalAlign="Right" style="width:85%;" runat="server">
                                                   <ASPNetMediaGUI:MediaLabel ID="MediaLabel2" runat="server" AssociatedControl="MediaPlayer1"></ASPNetMediaGUI:MediaLabel>
                                               </asp:TableCell>
                                             </asp:TableRow>
                                             <asp:TableRow ID="TableRow8" runat="server">
                                               <asp:TableCell ID="TableCell9" style="width:15%;" runat="server">
                                                   <asp:Label ID="VolumeLabel" runat="server" Text="<%$ Resources:Resource, PagesConcertsAudioVolumeLabel %>"></asp:Label>
                                               </asp:TableCell>
                                               <asp:TableCell ID="TableCell10" HorizontalAlign="Right" style="width:85%;" runat="server">
                                                   <ASPNetMediaGUI:MediaLabel ID="MediaLabel3" runat="server"  AssociatedControl="MediaPlayer1" LabelType="Volume"></ASPNetMediaGUI:MediaLabel>
                                               </asp:TableCell>
                                             </asp:TableRow>
                                        </asp:Table>


                                        <br />
                                        <div>
                                            <ASPNetMediaGUI:LoadMediaButton ID="LoadMediaButton1" runat="server" AssociatedControl="MediaPlayer1" MediaURL="Cnsrts/Audio/Ajjabal_TaleaHamdan/Track1.mp3"></ASPNetMediaGUI:LoadMediaButton><br />
                                            <ASPNetMediaGUI:PlayButton ID="PlayButton1" runat="server"  AssociatedControl="MediaPlayer1"></ASPNetMediaGUI:PlayButton>
                                            <ASPNetMediaGUI:PauseButton ID="PauseButton1" runat="server" AssociatedControl="MediaPlayer1"></ASPNetMediaGUI:PauseButton>
                                            <ASPNetMediaGUI:StopButton ID="StopButton1" runat="server" AssociatedControl="MediaPlayer1"></ASPNetMediaGUI:StopButton>
                                            <ASPNetMediaGUI:FastForwardButton ID="FastForwardButton1" runat="server" AssociatedControl="MediaPlayer1"></ASPNetMediaGUI:FastForwardButton>
                                            <ASPNetMediaGUI:FastReverseButton ID="FastReverseButton1" runat="server" AssociatedControl="MediaPlayer1"></ASPNetMediaGUI:FastReverseButton>
                                            <ASPNetMediaGUI:MuteButton ID="MuteButton1" runat="server" AssociatedControl="MediaPlayer1"></ASPNetMediaGUI:MuteButton>
                                            <ASPNetMediaGUI:VolumeUpButton ID="VolumeUpButton1"  runat="server" AssociatedControl="MediaPlayer1" Text="+" ></ASPNetMediaGUI:VolumeUpButton>
                                            <ASPNetMediaGUI:VolumeDownButton ID="VolumeDownButton1" runat="server" AssociatedControl="MediaPlayer1" Text="-"></ASPNetMediaGUI:VolumeDownButton><br />
                                        </div>
                                        <br />
                                        <asp:Label ID="PlayListLabel" runat="server" Text="<%$ Resources:Resource, PagesConcertsAudioPlayListLabel %>" ></asp:Label>
                                        <ASPNetMediaGUI:PlayList ID="PlayList1" runat="server" AutoGenerateColumns="False"
                                            CellPadding="4" DataSourceID="DefaultPlayList" GridLines="None" LoopPlayList="True"
                                            MediaPlayer="MediaPlayer1" ShowHeader="False" ForeColor="#333333">
                                            <FooterStyle BackColor="#990000" ForeColor="White" Font-Bold="True" />
                                            <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                                            <AlternatingRowStyle BackColor="White" />
                                            <PlayListTracks>
                                                <ASPNetMediaGUI:PlayListTrack></ASPNetMediaGUI:PlayListTrack>
                                            </PlayListTracks>
                                            <Columns>
                                                <asp:TemplateField ShowHeader="False">
                                                    <itemtemplate>
                                                        <asp:LinkButton ID="TrackSelectButton" runat="server" CausesValidation="False" CommandName="Select" Text='<%# Eval("Name") /*Eval("TrackNumber")+". "+Eval("URL")*/ %>'></asp:LinkButton>
                                                    </itemtemplate>
                                                </asp:TemplateField>
                                            </Columns>
                                            <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
                                            <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
                                        </ASPNetMediaGUI:PlayList>
                                        <br />
                                        <h3>PlayList Buttons:</h3>
                                        <ASPNetMediaGUI:PlayTrackButton ID="PlayTrackButton1" runat="server"  AssociatedControl="PlayList1"
                                            ButtonType="Link"></ASPNetMediaGUI:PlayTrackButton>
                                        <ASPNetMediaGUI:StopPlayListButton ID="StopPlayListButton1" runat="server" AssociatedControl="PlayList1"
                                            ButtonType="Link"></ASPNetMediaGUI:StopPlayListButton>
                                            <ASPNetMediaGUI:PreviousTrackButton ID="PreviousTrackButton1" runat="server" AssociatedControl="PlayList1" ButtonType="Link"></ASPNetMediaGUI:PreviousTrackButton>
                                        <ASPNetMediaGUI:NextTrackButton ID="NextTrackButton1" runat="server" AssociatedControl="PlayList1" ButtonType="Link"></ASPNetMediaGUI:NextTrackButton>
                                        <br /><br />
                                </telerik:RadAjaxPanel>
                                </asp:TableCell>
                            </asp:TableRow>
                            <asp:TableRow ID="TableRow3" runat="server">
                                <asp:TableCell ID="Table32" runat="server">

                                </asp:TableCell>
                            </asp:TableRow>
                        </asp:Table>
                    </asp:TableCell></asp:TableRow></asp:Table></ItemTemplate></asp:FormView></asp:Panel></asp:Content>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using ZajalControlLibrary;
using ASPNetAudio;
using ASPNetMediaGUI;
using System.Data;
using Telerik.Web.UI;

public partial class Pages_Concerts_Audio : BasePage
{
    private DataTable _mediaListDataTable;
    public DataTable MediaListDataTable
    {
        get
        {
            DataLstObjctGetData mediaListObject = new DataLstObjctGetData();
            DataSet _mediaListDataSet = new DataSet();
            _mediaListDataSet = mediaListObject.GetMediaListByID(Convert.ToInt32(Request.QueryString["cnsrt"]));
            _mediaListDataTable = _mediaListDataSet.Tables[0];//.Select("FAQsGrp = '" + Session["GrpName"].ToString() + "'");
            return _mediaListDataTable;
        }
    }
    protected void Page_Load(object sender, EventArgs e)
    {
        FormView _formView1 = (FormView)Page.Master.FindControl("ContentPlaceHolder3").FindControl("FormView1");
        PlayList _playList1 = (PlayList)_formView1.FindControl("PlayList1");
        Audio _mediaPlayer1 = (_formView1.FindControl("MediaPlayer1") as Audio);
        foreach (DataRow row in MediaListDataTable.Rows)
        {
            if (row["MTyp"].ToString().Trim().Equals("Audio"))
            {
                PlayListTrack _playListTrack = new PlayListTrack();
                _playListTrack.Name = row["MName"].ToString();
                _playListTrack.URL = "Cnsrts/" + row["MTyp"].ToString().Trim() + "/" + row["MURL"].ToString();
                _playList1.PlayListTracks.Add(_playListTrack);
            }
        }
        _playList1.PlayListTracks.RemoveAt(0);
    }

    protected void LinkButton1_Click(object sender, EventArgs e)
    {


    }



    protected void RadSlider_Ticks_ValueChanged(object sender, EventArgs e)
    {

        RadSlider _radSlider_Ticks = (RadSlider)sender;
        FormView _formView1 = (FormView)Page.Master.FindControl("ContentPlaceHolder3").FindControl("FormView1");
        Audio _mediaPlayer1 = (_formView1.FindControl("MediaPlayer1") as Audio);
        _mediaPlayer1.Volume = _radSlider_Ticks.Value;
    }
}

As you can see, there is two buttons which control the volume (VolumeUpButton  and VolumeDownButton ), But I need to control the volum using the RadSlider.

Attached with this post a screen shot of the page.
Please, can you explain to me why the mp3 file is being restarted every time I try to control the volume using the radsilder control.
It is apprecited to send me the modified code which solves the above code.

Regards,
Bader

[Tsvetie]

Hello Bader,
I am not familiar with this control, but just by looking at your code, I suppose the problem is that the slider postbacks the page, when its value changes:

<telerik:RadSlider ID="RadSlider_Ticks" runat="server" MinimumValue="0" MaximumValue="100"
     SmallChange="10" LargeChange="10" ItemType="Item" Height="70px" Width="350px"
     AnimationDuration="400" CssClass="TicksSlider" AutoPostBack="true"
     ThumbsInteractionMode="Free" onvaluechanged="RadSlider_Ticks_ValueChanged">
</telerik:RadSlider>

You should use the client-side valuechange event of RadSlider instead: http://www.telerik.com/help/aspnet-ajax/slider_clientonclientvaluechange.html. I noticed that the audio control has client-side API as well, so you should not have problems updating the volume, using JavaScript.

Best wishes,
Tsvetie
the Telerik team

[Bader]

Hello,

Thank you for your reply,
It is working,
I have another question, the audio control has two attributes (duration and position - Please view http://www.aspnetaudio.com/ASPNetAudio/documentation/?help=ASPNetAudio_JavaScript_API). this two attributes are dynamiclly changing. how can I make the radslider display the dynamic Duration and Position values?

Please, I need your help,
It is appreciated to send me the required code

Regards,
Bader

[Tsvetie]

Hello Bader,
In case these properties change client-side, you can use the client-side API of RadSlider to change the value of the control. For information on the client-side API, please refer to our online documentation: http://www.telerik.com/help/aspnet-ajax/slider_clientobject.html.

On the other hand, in case these properties change server-side, you can use the server-side API of RadSlider to update its value accordingly. In this case, you can refer to our online documentation as well, for additional information on the RadSlider class: http://www.telerik.com/help/aspnet-ajax/telerik.web.ui-telerik.web.ui.radslider_members.html.

Kind regards,
Tsvetie
the Telerik team