AJAX online music website (3) Part one function implementation, ajax online music

AJAX online music website (3) Part one function implementation, ajax online music

Today, I plan to review the specific implementation of website functions. If you want to know about the entire small project, I suggest you read the previous two blogs first.

1. AJAX online music website (1) requirements and functional structure

2. AJAX online music website (2) database and development environment

 

7. Main website module implementation

A. Online Music front-end

Because online music websites provide services related to online music for users, when users open a website, the homepage is introduced. Therefore, the homepage is a very important page for the whole website, the appearance of homepage layout and design will directly affect tourists' browsing and user registration. The home page must not only display various functions, but also focus on the overall system style, so that the home page can be fully functional and concise and beautiful.

On the front-end of the website, you can display the song ranking, album ranking, artist ranking, user logon and registration, system song search, audition ranking, download ranking, my favorites, and other functions. The program running result is 5.1.

$ (Function () {l (1) ;}) function l (m) {$. ajax ({type: "post", url: "ajaxmlist. aspx ", data:" id = "+ m, success: function (msg) {if (m =" 1 ") {$ ("# ltitle" ).html ("Music ranking")} if (m = "2") {$ ("# ltitle" ).html ("album ranking ")} if (m = "3") {$ ("# ltitle" ..html ("singer ranking")} if (m = "4 ") {$ ("# ltitle" ).html ("My favorites")} // put the data in the LIST $ ("# mlist" ).html (msg );}})}

2) In the logon area of the home page, you can compare the information with the user data table after the user submits the logon information, determine whether the user is a user or an administrator, and make different page Jump Actions, the key code is as follows:

Session ["type"] = ""; Session ["userId"] = ""; string SQL = "select password, [type] from [user] where userId = @ userId "; SqlCommand cmd = new SqlCommand (SQL, conn); cmd. parameters. add ("@ userId", SqlDbType. NChar ). value = userId. text. trim (); cmd. connection. open (); SqlDataReader dr = cmd. executeReader (); string passwd = ""; if (dr. read () {passwd = dr. getString (0); if (passwd. trim (). toString () = Password. Text. trim (). toString () {Session ["userId"] = userId. text. toString (); if (dr. getString (1 ). trim (). toString () = "admin") Response. redirect ("~ /MusicChange. aspx? UserId = "+ userId. text. toString () + ""); else Response. redirect ("Default. aspx ") ;}} else {Session [" userId "] = null; Session. clear (); FailureText. text = "incorrect account or password. logon failed! ";}

 

B. Audition and download of songs

When a user enters the online music website, he can listen to any song in the Song ranking list, such as 5.2, and download it to the local computer 5.3.

Figure 5.2 song review page

Figure 5.3 song Download Page

1) Implementation of the audition function

In the music ranking data table, define the following code:

<a href='playlist.aspx?id="+ dt.Rows[i]["id"].ToString() + "' target='_blank' >"

The user clicks the song name to enter the song review interface. The program will obtain the song file path through the song ID and pass it to the player. The key code is as follows:

string path = new DirectoryInfo(Server.MapPath("")).FullName.ToString() + @"\file\" + updateMusic();            string str = path.Replace('\\', '/');            fileUrl = str;            update_album();            update_singer();            SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["LocalSqlServer"].ToString());            string sql = "select * from [music]";            SqlCommand cmd = new SqlCommand(sql, conn);            cmd.Connection.Open();            SqlDataReader dr = cmd.ExecuteReader();            while (dr.Read())            {                    ListItem listItem = new ListItem { Value = dr.GetString(0), Text = dr.GetString(1) };                    Select1.Items.Add(listItem);                    }            Select1.Items[0].Selected = true;            dr.Close();            cmd.Connection.Close();

2) Implementation of the download function

In the music ranking data table, define the following code:

<A href = 'downloadlist. aspx? Id = "+ dt. Rows [I] [" id "]. ToString () +" '> download </a>

After the user clicks the Download button, the program obtains the file path of the song through the song ID, and writes the file through the Response object. The key code is as follows:

string m_name = downMusic();            string path = new DirectoryInfo(Server.MapPath("")).FullName.ToString() + @"\file\" + m_name;            string str = path.Replace('\\', '/');            update_album();            update_singer();            System.IO.FileInfo file = new System.IO.FileInfo(str);            if (file.Exists)            {                Response.Clear();                Response.AddHeader("Content-Disposition", "attachment; filename=" + HttpUtility.UrlEncode(Encoding.UTF8.GetBytes(m_name)));                Response.AddHeader("Content-Length", file.Length.ToString());                Response.ContentType = "application/octet-stream";                Response.Filter.Close();                Response.WriteFile(file.FullName);                Response.End();            }            else            {                Response.Write("This file does not exist.");            }            Response.Redirect("Default.aspx");

 

C. Fuzzy searching of songs

When a user only remembers a part of a song name, album, or artist, the online music website uses fuzzy search and can also find the song you want to listen to, as shown in Figure 5.4.

Figure 5.4 search

Implementation process:

When a user outputs text in the search box, when the search button is clicked, The search_btn_Click event is triggered, and the text and search types are imported into the dataBind method on the search page, you can perform a fuzzy search on a song by using a statement containing like '%' in the query database. The key code is as follows:

If (type. equals ("music") {cmd. commandText = "SELECT * FROM [music] WHERE (musicName like '%' + @ musicName + '%') order by count DESC"; cmd. parameters. add ("@ musicName", SqlDbType. NChar ). value = name;} else if (type. equals ("singer") {cmd. commandText = "SELECT * FROM [music] WHERE (singer like '%' + @ singer + '%') order by count DESC"; cmd. parameters. add ("@ singer", SqlDbType. NChar ). value = name;} else {cmd. com MandText = "SELECT * FROM [music] WHERE (album like '%' + @ album + '%') order by count DESC"; cmd. parameters. add ("@ album", SqlDbType. NChar ). value = name;} SqlDataAdapter da = new SqlDataAdapter (); da. selectCommand = cmd; SqlCommandBuilder sqlcb = new SqlCommandBuilder (da); DataSet ds = new DataSet (); da. fill (ds, "music"); if (ds. tables ["music"]. rows. count> 0) {dg. dataSource = ds; dg. dataBind ();} els E {dg. Visible = false; msg. Text = "no related file found! ";}}

 

How can static (html) web pages achieve online broadcast of songs?

I have worked on Flash players, but I have never done anything about JS, but I think the principles should be the same. According to your suggestion, I need to use JS to perform frame listening on the Player Plug-in on the webpage.

Let's talk about it briefly.

MATERIALS: Song and song file list (which can be XML or other files) and several simple JS statements

Processing:
1. When a webpage is generated, name the ID of the music Player Plug-in as WMA. Of course, you can name it as needed, but it is easy to describe here.
2. Read the content in XML.
At the same time, save the corresponding song name and address in XM to the array testmp3 (this array is of course a two-dimensional array, with the song name and Song address respectively in the Data Group)
Now, the preparation is complete. The following is the focus-continuous broadcasting.

3. related statements:
1. Define the getWMAtime Function

2. Use Interval = setInterval ("getWMAtime ()", 900) to call the getWMAtime function every 900 milliseconds and put it into Interval.
If you want to use "last song" and "next song", you can make it a function,
Assign the music address to WMA. URL, using WMA. controls. play (); play, use WMA. controls. stop (); stop playing. Use WMA. controls. pause (); pause playback. After changing the music address, remember to use Ajax to load new lyrics!

In addition:
The content of the getWMAtime function is the playback time for reading the current song.
Current playback time: WMA. controls. currentPosition;
Total time: WMA. currentMedia. duration;

After reading the current time, compare it with the time items in the array, the same (for other reasons, there may be different situations, so use "> = ")

If the playback time = total time of the song, use JS to change the WMA. URL attribute, and then use the address of WMA. controls. play.

Now, a simple JS player is ready.

If you have any questions, visit your blog and want to discuss them together.
Reference: all my answers are practical experience. Please do not repost them.

Ajax can be added

Function createXHR (){
Var xmlHttp;
Try {
XmlHttp = new XMLHttpRequest ();
} Catch (e ){
XmlHttp = new ActiveXObject ("Microsoft. XMLHTTP ");
}
Return xmlHttp;
}

Function Ajax (url, method, arg ){
This. xmlHttp = createXHR ();
Var reg =/[Gg] [Ee] [Tt]/;
If (reg. test (method )){
This. method = "GET ";
This. arg = null;
} Else {
This. method = "POST ";
This. arg = arg;
}
If (url. indexOf ("? ")>-1 ){
Url + = "& timestamp =" + new Date (). getTime ();
} Else {
Url + = "? Timestamp = "+ new Date (). getTime ();
}
This. url = url;
This. xmlHttp. open (this. method, this. url, true );
If (this. method = "POST "){
This. xmlHttp. setRequestHeader ("Content-Type", "application/x-www-form-urlencoded ");
}
This. xmlHttp. send (this. arg );
Return this. xmlHttp;
}

Function String (str ){
This. string = str;
This. length = str. length;
}
String. prototype. toUpper = function (index, length ){
Var str = '';
If (typeof (length) = 'undefined '){
Var length = this. length-index;
}
For (var I = 0; I <this. length; I ++ ){
If (I = index | -- length> 0 ){
Str + = this. string [I]. toUpperCase ();
} Else {
Str + = this. string [I];
}
}
Return str;
}

Function JS (data ){
If (typeof (data) = 'undefined '){
Return this;
}
This. dom = this. get (data );
Return this;
}

JS. prototype. loadOver = function (func ){
This. dom = window;
This. addEvent ('load', func );
}

JS. prototype. addEvent = function (name, func ){
Var reg = &... the remaining full text>