Code .Net: Audio Player HTML5 ASP.NET Control

ASP.NET HTML5 est un contrôle est basé en HTML5 et ne nécessitent pas de Flash player ou tout autre contrôle ActiveX pour lire des fichiers audio sur votre site.
Je me suis basé sur ce projet HTML5 MUSIC PLAYER http://www.codebasehero.com/2011/07/html5-music-player-updated/ pour créér mon contrôle asp.net.

Aperçu du résultat

ASP.NET HTML5 Audio Player

Utilisation

Html5playlist.cs

/**
 * Created by Hicham Lakhdar
 * hichamlakhdar.blogspot.com
 * Date: 16/12/2014
 *
 * Version: 1.01
 * License: MIT License
 */


using System;
using System.Collections;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Web;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;

namespace html5_playlist_aspnet.Controls
{
    [DefaultProperty("Text")]
    [ToolboxData("<{0}:html5playlist runat=server></{0}:html5playlist>")]
    public class html5playlist : Label
    {
        [Bindable(true)]
        [Category("Appearance")]
        [DefaultValue("")]
        [Localizable(true)]
        ArrayList myPlaylist=new ArrayList();
      

        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);
        }
        public void AddTrack(string title, string mp3path, string artiste, string imgcoverpath)
        { 
            string track="{mp3:'"+mp3path+"',title:'"+title+"',artist:'"+artiste+"',duration:'0:00',cover:'"+imgcoverpath+"'}";
            myPlaylist.Add(track);
        }
        public void Bind()
        {
            var strings = myPlaylist.Cast<string>().ToArray();
            var theString ="["+ string.Join(",", strings)+ "]";
            string script = @"$('.playlistzone').ttwMusicPlayer(" + theString + ", {autoPlay:false, description:'',jPlayer:{swfPath:'Scripts/playlist_plugin/jquery-jplayer',    }});";
            ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), Guid.NewGuid().ToString(), script, true);
          
        }
        protected override void RenderContents(HtmlTextWriter output)
        {
            try
            {
                output.Write(@"<div class='playlistzone'></div>");
            }
            catch (Exception ex)
            {
                output.Write(ex);
            }
        }
      
    }
}

demo.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="demo.aspx.cs" Inherits="html5_playlist_aspnet.demo" %>

<%@ Register assembly="html5_playlist_aspnet" namespace="html5_playlist_aspnet.Controls" tagprefix="cc1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
 <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
 <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
 <![endif]-->

  <link rel="stylesheet" type="text/css" href="Scripts/playlist_plugin/css/style.css"/>
  <link rel="stylesheet" type="text/css" href="Content/demo.css"/>
  <script type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script>
  <script type="text/javascript" src="Scripts/playlist_plugin/jquery.jplayer.js"></script>
  <script type="text/javascript" src="Scripts/playlist_plugin/ttw-music-player-min.js"></script>
  <script type="text/javascript" src="Scripts/1.js"></script>
  
</head>
<body>
         <form id="form1" runat="server">
  
                  <cc1:html5playlist ID="html5playlist1" runat="server">
                 </cc1:html5playlist>
           <div class="footer">
                 &copy; Hicham Lakhdar 2014
           </div>
       
         </form>
   
</body>
</html>

demo.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace html5_playlist_aspnet
{
    public partial class demo : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                html5playlist1.AddTrack("Track 005", "mp3/1.mp3", "Lorem ipsum dolor sit", "images/1.jpg");
                html5playlist1.AddTrack("Track 006", "mp3/1.mp3", "Sed ut perspiciatis unde omnis ", "images/1.jpg");
                html5playlist1.AddTrack("Track 007", "mp3/1.mp3", "Lorem ipsum dolor sit", "images/2.jpg");
                html5playlist1.AddTrack("Track 008", "mp3/1.mp3", "Sed ut perspiciatis unde omnis ", "images/1.jpg");
                html5playlist1.AddTrack("Track 009", "mp3/1.mp3", "Lorem ipsum dolor sit", "images/1.jpg");
                html5playlist1.AddTrack("Track 0010", "mp3/1.mp3", "Sed ut perspiciatis unde omnis ", "images/1.jpg");
                html5playlist1.AddTrack("Track 0011", "mp3/1.mp3", "Lorem ipsum dolor sit", "images/2.jpg");
                html5playlist1.AddTrack("Track 0013", "mp3/1.mp3", "Sed ut perspiciatis unde omnis ", "images/1.jpg");
                html5playlist1.AddTrack("Track 0014", "mp3/1.mp3", "Lorem ipsum dolor sit", "images/1.jpg");
                html5playlist1.AddTrack("Track 0015", "mp3/1.mp3", "Sed ut perspiciatis unde omnis ", "images/1.jpg");
                html5playlist1.AddTrack("Track 0016", "mp3/1.mp3", "Lorem ipsum dolor sit", "images/1.jpg");
                html5playlist1.AddTrack("Track 0017", "mp3/1.mp3", "Sed ut perspiciatis unde omnis ", "images/1.jpg");
                html5playlist1.AddTrack("Track 0018", "mp3/1.mp3", "Sed ut perspiciatis unde omnis", "images/1.jpg");
                html5playlist1.AddTrack("Track 0019", "mp3/1.mp3", "Lorem ipsum dolor sit", "images/1.jpg");
                html5playlist1.Bind();
            }
        }
    }
}

Téléchargement démo : vs2012demo.zip

Code .Net

mardi 16 décembre 2014

Audio Player HTML5 ASP.NET Control

Aperçu du résultat

Utilisation

Aucun commentaire:

Enregistrer un commentaire