For individual webmasters, how to make their websites unique and full of personality has always been the goal of unremitting efforts. In addition to improving the visual effects and interactive functions of the page as much as possible, if you can hear a beautiful and moving music while opening the web page, I believe this will make your website more colorful.
1. Learn to add music files
There are generally two ways to add background music to a web page. The first is to add it through the ordinary
(1) Use the < bgsound> tag
Use Dreamweaver to open the page where you need to add background music, click "Code" to open the code editing view, between < body> < /body> Enter "<" in the pop-up code prompt box and select bgsound (Figure 1).
Figure 1
Dreamweaver automatically enters the "< bgsound" code and then presses the space bar. The code prompt box will automatically list the attributes of the bgsound tag for you to choose and use. The bgsound tag*** has five attributes, among which balance is to set the left and right balance of the music, delay is to set the playback delay, loop is to control the number of loops, src is the path to our music file, and volume is the volume setting. Generally when adding background music, we do not need to set the left and right equalization and delay settings for the music, so we only need a few main parameters. The final code is as follows:
< bgsound src="music.mid" loop="-1">
Among them, loop="-1" means that the music will play in an infinite loop. If If you want to set the number of plays, just change it to the corresponding number.
This method of adding background music is the most basic method and the most commonly used method. The background music format supports most of the current mainstream music formats, such as WAV, MID, MP3, etc. If you want to take into account browsers with low Internet speeds, you can use MID sound effects as background music for web pages. Because MID music files are small, they can be loaded and played quickly when the web page is opened. However, MID also has shortcomings. It can only store the melody of music, but does not have nice harmonies or lyrics. If your Internet speed is fast or you feel that MID music is a bit monotonous, you can also add MP3 music. Just change happy.mid in the above code to happy.mp3.
Tip: Adding background music to FrontPage is relatively more convenient than Dreamweaver. Just make relevant settings in the "Background" dialog box (Figure 2).
Figure 2
(2) Using the < embed > tag
Using the < embed > tag to add music is not very common, but its function It is very powerful. If combined with some playback controls, a Web player can be created.
Its usage is basically the same as the first one, except that instead of selecting gbsound in the code prompt box in the first step, select embed. Then select its attributes and set them accordingly (Figure 3). It can be seen from the figure that embed has many more attributes than gbsound's five attributes. The final code is as follows: < embed src="music.mp3" autostart="true" loop="true" hidden="true">.
Figure 3
Among them, autostart is used to set whether the music will automatically play when the page is opened, and hidden sets whether to hide the media player. Because embed is actually similar to a music player on a Web page, if it is not hidden, your system's default media plug-in will be displayed.
For these two methods, the author believes that both have their own advantages and disadvantages: the first method plays music when the page is opened. If the page is minimized, the music will automatically pause after playing. If you use This will not happen with the second method, as long as the window is not closed, it will keep playing. So I hope you can choose the method of adding music according to your own situation during use.
After you have learned the simple method of adding web music, you should work on the interface and functions. We can use "Web Music Player" to create a stylish music player.
2. Create a fashionable music player
After learning the simple method of adding web music, you should work on the interface and functions. We can use "Web Music Player" to create a stylish music player.
Tip: "Webpage Music Player" is a webpage plug-in. After running the created page, it will call the Windows Media player that comes with the system to play the preset MP3 songs.
(1) Simple settings
First download the playback plug-in (download address: /soft/music.rar), unzip it and enter the directory, where music.htm is what we want on the homepage In the loaded playbar page, list.htm is a pop-up page used by viewers to view the playlist. The js folder contains several playback control files, and img contains some image files for the playback interface.
Use web page editing software to open music.htm and find the following code:
< script Language="Javascript">
var blnAutoStart = true?
var blnRndPlay = false?
var blnStatusBar = false?
var blnShowVolCtrl = true?
var blnShowPlist = true?
< p> var blnUseSmi = false?var blnLoopTrk = true?
var blnShowMmInfo =false?
in Here you can make basic settings for the player. The meanings of the above sentences are: whether to play automatically, whether to play sequentially, whether to display the status bar, whether to display the audio control status, whether to allow the display of playlists, whether to use SMI mode, whether to loop playback, and whether to display song information. You can set them according to your needs, where true is "yes" and false is "no". In addition, in order to make your playback bar more personalized, you can also find the
(2) Add playlist
Open the playlist file bglist.js in the js folder. Here you can add your favorite songs to the list. Specifically Add the format mkList "song path"? "song description", where "song path" can be the local address you uploaded to the host, or you can specify the MP3 address on the network. "Song description" is used to scroll and display during playback On the strip, it can be the name of the artist and the song. For example, to add Jay Chou's "Tornado", we first find the link address that can be played in real time on the Internet, and then add it to the list: mkList"/A/000/004/000004930.htm