RadSlider with audio control

4 posts, 0 answers
  1. Bader
    Bader avatar
    215 posts
    Member since:
    Aug 2008

    Posted 12 Oct 2010 Link to this post

    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
  2. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 18 Oct 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Bader
    Bader avatar
    215 posts
    Member since:
    Aug 2008

    Posted 18 Oct 2010 Link to this post

    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
  5. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 21 Oct 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top