This is a migrated thread and some comments may be shown as answers.

[Solved] RadSlider with audio control

3 Answers 141 Views

Slider

This is a migrated thread and some comments may be shown as answers.

Bader asked on 13 Oct 2010, 12:11 AM

radslider.jpg

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

3 Answers, 1 is accepted

answered on 18 Oct 2010, 01:25 PM

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

answered on 21 Oct 2010, 04:08 PM

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