AJAX online music website (4) Part two function implementation, ajax online music

Source: Internet
Author: User

AJAX online music website (4) Part two function implementation, ajax online music

In the previous blog, I have summarized the specific implementation of the three functions. Today I will summarize the specific implementation of the remaining functions. If you want to have a clear understanding of the entire small project, I suggest you go to the previous blogs.

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

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

3. AJAX online music website (3) Part one function implementation

 

D. Implementation of the Song adding Function

Administrators or authorized users can add their favorite songs to the homepage ranking of online music websites. 7.5.

Figure 7.5 Add a song

Implementation process:

The following code defines the error attribute in the tag on the ASP. NET page:

Display = "Dynamic" ErrorMessage = "RequiredFieldValidator"> the singer information is not empty.

The singer information is not empty. After you click "add", the program will check whether the content of each text box meets the requirements and display the corresponding prompt. If the information is correct, the program inserts information into each data table through the SQL language. The key code is as follows:

1 try 2 {3 upload. saveAs (path + musicname); 4 conn. open (); 5 SqlTransaction myTrans = conn. beginTransaction (); 6 try 7 {8 SqlCommand cmd = new SqlCommand (); 9 cmd. transaction = myTrans; 10 insert_music (conn, musicname, cmd); 11 if (! IsExisted ("album", "album", conn, cmd) 12 {13 insert_album (conn, cmd); 14} 15 if (! IsExisted ("singer", "singer", conn, cmd) 16 {17 insert_singer (conn, cmd); 18} 19 myTrans. commit (); 20 msg. text = "music added! "; 21 singer. text = ""; 22 birthday. text = ""; 23 holobby. text = ""; 24 album. text = ""; 25 profile. text = ""; 26} 27}

 

E. Implementation of different types of playing tickets

You can select the method (random playback, sequential playback, and single repetition) for playing the list songs based on your preferences, as shown in Figure 7.6.

Figure 7.6 different types of playing tickets

Implementation process:

First, on the front-end page, set the index value in DropDownList to the content, as shown in the following code:

<Asp: DropDownList> <asp: DropDownList ID = "ddlPlayType" runat = "server"> <asp: ListItem Value = "0"> sequential playback </asp: listItem> <asp: ListItem Value = "1"> random playback </asp: ListItem> <asp: ListItem Value = "2"> Single Loop </asp: listItem> </asp: DropDownList>

When a user plays the next song, the program compares the current index value of DropDownList to determine the ID of the music file that is imported to the player. The key code is as follows:

// Sequential playback if (ddlPlayType. selectedValue = "0") {int listCount = Select1.Items. count; // when this is the last one, if (selectIx + 1) = listCount) {// set the last one to an optional Select1.Items [selectIx]. selected = false; // select the first song Select1.Items [0]. selected = true; // ID is the ID id of the First Song = Select1.Items [0]. value;} else {// obtain the ID of the next song = Select1.Items [Select1.SelectedIndex + 1]. value; Select1.Items [selectIx]. selected = false; Select1.Items [selectIx + 1]. selected = true ;}// play else if (ddlPlayType. selectedValue = "1") {// Random number Random rad = new Random (); // Random number int radIx = rad in the number of songs. next (0, Select1.Items. count); // select the ID of the selected random Song = Select1.Items [radIx]. value; Select1.Items [selectIx]. selected = false; Select1.Items [radIx]. selected = true;} // single loop else {id = Select1.Items [selectIx]. value ;}

 

F. The administrator maintains the song

After logging on to the background as an administrator, you can modify the music, album, and artist information, as shown in Figures 7.7 and 7.8.

Figure 7.7 music Information Modification

Figure 7.8 music details Modification

Implementation process:

Use the updated and deleted SQL language to synchronize the changed page information to the database by adding the button btn_Click event. The key code is as follows:

cmd.CommandText = "update [music] set musicName=@musicName,singer=@singer,album=@album,type=@type where id=@id";cmd.Parameters.Add("@musicName", SqlDbType.NChar).Value = musicName.Text.Trim().ToString();cmd.Parameters.Add("@singer", SqlDbType.NChar).Value = singer.SelectedValue.Trim().ToString();cmd.Parameters.Add("@album", SqlDbType.NChar).Value = album.SelectedValue.Trim().ToString();cmd.Parameters.Add("@type", SqlDbType.NChar).Value = typelist.SelectedValue.Trim().ToString();

 

G. user authorization and registration

The administrator can authorize the user to become the administrator to maintain the website tracks, 7.9. Visitors can register to become online music users, 7.10.

Figure 7.9 administrator authorization page

Figure 7.10 User Registration

1) Authorization implementation process:

When the Administrator logs on to the background, click the authorization button to trigger the dg_ItemCommand event. The website executes the SQL update statement based on the authorized user ID. The key code is as follows:

if (e.CommandName == "allowUser")        {            msg.Text = "";            SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["LocalSqlServer"].ToString());            string userId = dg.DataKeys[e.Item.ItemIndex].ToString();            conn.Open();            try            {         SqlCommand cmd = new SqlCommand();         cmd.CommandText = "update [user] set type ='admin' where userId=@userId";         cmd.Connection = conn;         cmd.Parameters.Add("@userId", SqlDbType.NChar).Value = userId.Trim();         cmd.ExecuteNonQuery();         dataBind();            }

2) Registration implementation process:
When you enter the registration page information, you can determine whether the user name and e_mail format are correct. After you click the Add button, the addbtn_Click event is triggered and the information is inserted into the user information data table, the key code is as follows:

Try {conn. open (); SqlCommand cmd = new SqlCommand (); cmd. connection = conn; cmd. parameters. add ("@ userId", SqlDbType. NChar ). value = userId. text. trim (); cmd. parameters. add ("@ passwd", SqlDbType. NChar ). value = password. text. trim (); cmd. parameters. add ("@ name", SqlDbType. NChar ). value = name. text. trim (); cmd. parameters. add ("@ sex", SqlDbType. NChar ). value = sex. selectedValue. toString (); cmd. parameters. add ( "@ Mail", SqlDbType. NChar ). value = mail. text. trim (); cmd. parameters. add ("@ type", SqlDbType. NChar ). value = "user"; if (! IsExisted (cmd) {cmd. commandText = "insert into [user] VALUES (@ userId, @ passwd, @ name, @ sex, @ mail, @ type)"; cmd. executeNonQuery (); msg. text = "registration successful! "; UserId. text = ""; name. text = ""; mail. text = ""; Response. redirect ("Default. aspx ");} else msg. text = "the user name already exists! ";

 


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.

How can we implement various functions on the Web page? What should we learn?

To implement the function of the message board, you need to learn a dynamic website programming language, such as php, jsp, asp, and so on. Using these languages, you can process and display messages in the background, at the same time, databases such as Mysql need to be used. javascript is a front-end language that is executed in a browser to enhance user experience.
To learn php, you can go to the php100 Chinese network and download the php100 video tutorial. It is very helpful for you to learn. It is very detailed and suitable for beginners.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.