代碼學習群簡易教程（30）
代碼學習群簡易教程（30）——播放器代碼應用在製作網頁時，不少朋友喜歡在網頁中添加背景音樂。然而又為找不到合適的播放器而患愁。本節教程，我專題講解如何應用播放器代碼給網頁添加播放器，以解決朋友們添加背景音樂的困惑。播放器的類型，可以從多種角度分類。從能否自動播放的角度分類，有手動播放器與自動播放器。自動播放器又可分為只播放一次與自動循環播放兩種。從是否顯示播放器圖片的角度分類，有顯示播放器圖片與隱藏播放器圖片兩種。……各種類型的播放器，有各自的優點。手動播放器與只播放一次的播放器，其優點是能夠控制音樂的是否播放。在你想聽音樂的時候，就讓播放器播放，不想聽的時候，就關閉播放器。自動循環播放的播放器，其優點是只要打開網頁，播放器就能自動循環播放，不需要手動去操作。顯示播放器圖片的播放器，優點是不但能夠欣賞音樂，而且播放器的圖片可以作為網頁的插圖，起到美化網頁的作用。隱藏播放器圖片的播放器，其優點是在網頁中看不到播放器，卻能夠聽到優美的音樂聲音，給人一種神秘的感覺。下面我分別講解幾種播放器代碼的應用方法。我講解的播放器代碼，是通用的播放器代碼。也就是說，不用你註冊音樂網站，你喜歡哪位歌手演唱的哪首歌曲，只要在「百度」中搜索一下，如果能夠正常播放，按說明添加代碼中即可。
一、單曲播放器：1、手動播放的單曲播放器：<EMBED height=74 type=application/x-shockwave-flash width_=500 src=http://box.baidu.com/widget/flash/song.swf?name=十五的月亮&artist=董文華&autoPlay=false wmode="transparent">上面的代碼，是手動單曲播放器的代碼。歌曲名稱是「十五的月亮」，演唱家是「董文華」。如果你想製作其他歌手的播放器，只要替換一下「歌曲名稱」與「演唱家的名字」就行了。2、自動播放的單曲播放器：手動播放器你不喜歡嗎？那就修改為自動播放器吧。很簡單的，只要把上面代碼中的false修改為：true ，歌曲就能夠自動播放啦。不過，只是自動播放一次歐！如果你還想播放一次，點擊一下播放器中的三角形按鈕就能夠再播放一次啦。請注意：千萬別弄錯歐！如果你覺得這種播放器光禿禿的不美觀，就給播放器添加一個你喜愛的圖片吧，圖片中還可以添加歌詞歐！舉例如下：<DIV align=center><TABLE style="POSITION: relative; WIDTH: 750px; HEIGHT: 270px; TOP: 0px; LEFT: 0px" border=0 cellSpacing=0 cellPadding=3><TBODY><TR><TD><EMBED height=460 type=application/x-shockwave-flash pluginspage=http://www.macromedia.com/go/getflashplayer width_=650 src=http://www.soflash.net/flash/4d9/6725f3d1e0c37e27fc9c88acb1a66faa.swf data="/mod/446/174171446/20130910/5431230280148905201309101655" allowNetworking="internal" allowScriptAccess="never" quality="high" invokeurls="false" wmode="transparent"> <EMBED style="POSITION: absolute; WIDTH: 500px; HEIGHT: 270px; TOP: 386px; LEFT: 60px" height=74 type=application/x-shockwave-flash width_=500 src=http://box.baidu.com/widget/flash/song.swf?name=彈起我心愛的土琵琶&artist=李雙江&autoPlay=true opaque??="" wmode="transparent"><IMG style="POSITION: absolute; WIDTH: 100px; HEIGHT: 50px; TOP: 5px; LEFT: 500px" src="https://www.getit01.com/getimg_360.php?url=http://image70.360doc.com/DownloadImg/2014/03/0823/39735860_2.gif"><MARQUEE style="POSITION: absolute; HEIGHT: 150px; TOP: 20px; LEFT: 300px" direction=up width_=780 scrollAmount=1 scrollDelay=100><FONT style="FONT-FAMILY: 黑體; COLOR: rgb(250,250,0)">西邊的太陽快要落山了<BR>微山湖上靜悄悄<BR>彈起我心愛的土琵琶<BR>唱起那動人的歌謠<BR><BR>西邊的太陽快要落山了<BR>微山湖上靜悄悄<BR>彈起我心愛的土琵琶<BR>唱起那動人的歌謠<BR><BR>西邊的太陽快要落山了<BR>微山湖上靜悄悄<BR>彈起我心愛的土琵琶<BR>唱起那動人的歌謠 <BR><BR>西邊的太陽快要落山了<BR>微山湖上靜悄悄<BR>彈起我心愛的土琵琶<BR>唱起那動人的歌謠<BR><BR>爬上飛快的火車<BR>像騎上賓士的駿馬<BR>車站和鐵道線上<BR>是我們殺敵的好戰場 <BR><BR>我們爬飛車那個搞機槍<BR>闖火車那個炸橋樑<BR>就像鋼刀插入敵胸膛<BR>打得鬼子魂飛膽喪<BR><BR>西邊的太陽就要落山了<BR>鬼子的末日就要來到<BR>彈起我心愛的土琵琶<BR>唱起那動人的歌謠</FONT></MARQUEE></TD></TR></TBODY></TABLE></DIV>3、循環播放的播放器：<DIV align=center><EMBED style="WIDTH: 450px; HEIGHT: 54px" type=application/x-shockwave-flash src=http://box.baidu.com/widget/flash/song.swf wmode="transparent" invokeurls="false" quality="high" allowscriptaccess="never" flashvars="name=友誼地久天長&artist=黑鴨子&autoPlay=true&loop=true" allownetworking="internal"> </DIV>上面的代碼是「黑鴨子」演唱的「友誼地久天長」。代碼中：FlashVars屬性:傳遞參數。name屬性：名字，是指歌曲的名字。artist屬性：藝術家，就是指歌唱家。也就是歌曲的演唱者。你可以隨意替換歌曲名稱與歌唱家的名稱，欣賞你喜歡的歌曲。這種播放器，也是同樣的道理，你可以給播放器添加漂亮的圖片，還可以添加歌詞，添加動畫圖片等等內容歐。舉例如下：<TABLE style="POSITION: relative; WIDTH: 800px; HEIGHT: 463px; TOP: 0px; LEFT: 0px" border=5 cellSpacing=10 borderColor=#990000 cellPadding=1 width_=745 background=http://userimage5.360doc.com/13/0913/12/144136_201309131217390953.jpg bgColor=#00ff00 height=480><TBODY><TR><TD><EMBED height=450 type=application/x-shockwave-flash align=right width_=800 src=http://file.edmin.cn/2010/day_101229/20101229_a1efc5147e30db191d1e6FMY66ruq9rF.swf wmode="transparent" quality="high"><DIV align=center><EMBED style="WIDTH: 3px; HEIGHT: 3px" type=application/x-shockwave-flash src=http://box.baidu.com/widget/flash/song.swf wmode="transparent" invokeurls="false" quality="high" allowscriptaccess="never" flashvars="name=友誼地久天長&artist=黑鴨子&autoPlay=true&loop=true" allownetworking="internal"> </DIV></TD></TR></TBODY></TABLE>上面講解的三種單曲播放器，都用不著在網路中尋找歌曲的地址。
二、mp3播放器：mp3播放器是一種很美的播放器。你喜歡欣賞哪首歌曲，只要在網路中找到這首歌曲的mp3外鏈地址，就可以應用這種播放器。尋找歌曲的mp3外鏈地址，不少朋友覺得是件難事。我也曾為歌曲的mp3有效地址困惑了好長時間。不過，經過了一段時間的努力探索，基本上解決了。下面我講解幾種mp3播放器的應用方法。1、最簡單的mp3播放器：選擇一首你喜愛的歌曲，在網路中找到它的mp3外鏈地址，替換掉下面代碼中的紅色代碼地址，就能夠成為你喜愛的這首歌曲的mp3播放器了。<EMBED height=30 type=audio/x-pn-realaudio-plugin width_=500 src=http://up.haoduoge.com/up/mp3/2014-08-03/1407072717.mp3 loop="1" autostart="1" wmode="transparent">歌曲的mp3外鏈地址尋找方法：在百度的搜索框中輸入你選擇的歌曲名稱，後面再輸入「的mp3地址」,然後點擊「百度一下」。在進入的頁面中，點擊有外鏈地址的文章標題，在彈出的頁面中會播放這首歌曲，頁面下方就有這首歌曲的mp3地址。也可以直接進入這個網站：http://www.haoduoge.com/，在搜索框中輸入你想要的歌曲名稱進行搜索，一般也能夠找到你想要的歌曲的mp3外鏈地址。2、多首歌曲的mp3播放器：代碼舉例：<EMBED height=197 type=application/x-shockwave-flash width_=381 src=http://upload.yinhuabbs.cn/up/upload/201301/1359300664x-573548507.swf allowNetworking="internal" flashvars="gcx=10&sjx=220&anx=295&jdtx=5&gcy=177&sjy=175&any=180&jdty=195&gcfd=100&gckd=202&gcys=ffffff&anfd=60&anys=ffffff&sjfd=100&sjys=ffffff&jdtxz=377&jdtgd=2&jdtbfys=993333&jdtxzys=99ccff&dgx=10&dgy=50&dggd=80&dgbjtm=150&dgqmbj=ffffff&dgdqzys=ff0000&dgqtzys=00ff00&r=true&s=1&mp3=http://qzone.haoduoge.com/music/EBF87H1IWC88DB1C1A76804C0C823F5A60389.mp3|http://lianjie.92cc.com/mp3/652239b8d4045e3847c02eb22dc6bf0c7.mp3|http://qzone.haoduoge.com/music/A00173OE0CCB715BC418AE0D137A6F3E56BFE.mp3|http://lianjie.92cc.com/mp3/f01b175305722aabe9fa826539b5ba697.mp3|歌曲地址|歌曲地址 &mp3n|血染的風采|望星空|人說山西好風光|十五的月亮|歌曲名|歌曲名|歌曲名&lrc=" allowScriptAccess="never" quality="high" invokeurls="false" wmode="transparent">上面的代碼，是多首歌曲的mp3播放器代碼。我在代碼中添加了四首歌曲，你如果不喜歡，可以替換。歌曲可以添加若干首。每兩首歌曲的mp3地址之間，用一條豎線隔開；每兩首歌曲名稱之間，也用一條豎線隔開即可。如下：一首歌曲：mp3=MP3網址多首歌曲：mp3=MP3網址1|MP3網址2|......|MP3網址n多首歌曲時，MP3網址之間用一條豎線隔開。一首歌曲：mp3n=歌曲名稱多首歌曲：mp3n=歌曲名稱1|歌曲名稱2|......|歌曲名稱n|多首歌曲時，歌曲名稱之間用一條豎線隔開，並與「MP3網址」一一對應。效果見：http://www.360doc.com/content/14/0804/17/4127803_399400177.shtml3、移動屏幕式播放器：移動式屏幕播放器，是一款不錯的播放器。你觀察其顯示效果，很像用移動標籤製作的移動文字，然而，在代碼中根本沒有移動標籤。這種播放器，不是也很神奇嗎？代碼舉例：<EMBED height=80 type=application/x-shockwave-flash width_=690 src=http://dashan.gotoip1.com/bfq/pygdzm.swf FLASHVARS="s=1&mp3=http://qzone.haoduoge.com/music/A00173OE0CCB715BC418AE0D137A6F3E56BFE.mp3&wzkd=680&wzyd=2&wzzh=25&wzys=FF0000&wzys1=ffff00&wzxt=斜體&wenzi=「人說山西好風光，地肥水美五穀香。左手一指太行山，右手一指是呂梁。站在那高處望上一望，你看那汾河的水呀，嘩啦啦啦流過我的小村旁。 杏花村裡開杏花，兒女正當好年華。男兒不怕千般苦，女兒能銹萬種花。人有那志氣永不老，你看那白髮的婆婆，挺起那腰板也象十七八 。 " QUALITY="high" WMODE="transparent" autostart="true" allowNetworking="internal" allowScriptAccess="never"></EMBED>移動屏幕式播放器效果：http://www.360doc.com/showweb/0/0/399211571.aspx在這種播放器中，用到一些屬性。解析如下：FLASHVARS：參數傳值。參數傳值中的內容，是為播放器設置的屬性屬值。s=1為自動播放；mp3=…… 等號後面為mp3的地址；wenzi：滾動文字。autostart：是指指定播放的影音文件是否為自動播放,其值為true或no。默認值為「no」，表示不立即播放；true表示立即播放。WMODE="transparent"為：窗口模式＝透明窗口QUALITY="high" 質量＝高品質wzzt=楷體為：文字字體＝楷體 wzxt=斜體為：文字字體＝斜體wzyd=8 文字滾動速度=8&轉義符號。用於屬性之間的間隔。wzkd=680為：字幕寬度＝680wzys=FFCC00為： 顏色＝黃色wzzh=25為：字型大小＝25pxwzys1=00ff00為： 文字濾鏡－發光顏色＝綠色wzct=1為：粗體文字wzxhx=1為：下劃線文字4、同步歌詞式播放器：同步歌詞式播放器，是一款美麗的播放器，神奇的播放器，也是我最喜愛的一款播放器。同步歌詞式播放器，不但能夠聆聽音樂，而且能夠顯示「同步歌詞」。所謂「同步歌詞」，就是說，你聽到歌唱家唱什麼歌詞，屏幕上就顯示出什麼歌詞。你說神奇不神奇啊？代碼舉例：<EMBED height=60 type=application/x-shockwave-flash width_=600 src=http://dashan.gotoip1.com/bfq/pygdzm.swf allownetworking="internal" flashvars="wzzh=40&wzys=ff0000&wzys1=ffff00&s=1&mp3=http://lianjie.92cc.com/mp3/652239b8d4045e3847c02eb22dc6bf0c7.mp3&lrc= [00:01.06]望星空 [00:06.17]作詞：石祥 [00:09.21]作曲：鐵源 [00:10.19]演唱：董文華 [00:12.24]字幕：春天沒來 整理 [00:17.63]夜蒙蒙 望星空 [00:25.51]我在尋找一顆星 [00:33.26]它是那麼明亮 它是那麼深情 [00:40.53]那是我早已熟悉的眼睛 [00:49.63]我望見了你呀 你可望見了我 [00:55.42]天遙地遠 息息相通 息息相通 [01:06.42]即使你顧不上看我一眼 看上我一眼 [01:13.76]我也理解你呀 此刻的心情 [01:30.03] [01:36.31]夜深沉 難入夢 我在凝望那顆星 [01:53.11]它是那麼燦爛 它是那麼晶瑩 [02:01.48]那是我敬慕的一顆心靈 [02:10.85]我思念著你呀 你可思念著我 [02:18.13]海誓山盟 彼些忠誠 彼些忠誠 [02:24.51]即合使你化作流星毅然離去 [02:33.61]你也永遠閃耀在我的心中 [02:41.51]在我的心中 " allowscriptaccess="never" quality="high" invokeurls="false" wmode="transparent">同步歌詞式播放器效果：http://www.360doc.com/content/14/0803/07/4127803_399049942.shtml應用同步歌詞式播放器，需要找到歌曲的同步歌詞。尋找同步歌詞的方法：進入http://www.5ilrc.com/網站，輸入歌曲名稱搜索，一般都能夠找到你想要的歌曲的同步歌詞。當然了，還有其它網站也能夠搜索到歌曲的同步歌詞。在這種播放器中，也用到一些屬性。解析如下：flashvars：參數傳值。參數傳值中的內容，是為播放器設置的屬性屬值。wzzh=40為：文字字型大小＝40；wzys=ff0000為： 文字顏色＝紅色；wzys1=ffff00 發光文字顏色＝黃色；s=1為：自動播放；mp3=……為歌曲的mp3地址。lrc為：同步歌詞內容。 為：間隔符號。[00:01.06]為：時間段。分鐘：秒.毫秒。望星空：歌詞內容。每次顯示的文字內容的代碼都由三部分組成：時間段（時間段中的數字，分鐘與秒是用冒號隔開的，秒與毫秒是用一個小圓點隔開的。），文字內容，間隔符號。例如：[00:17.63]夜蒙蒙 望星空 ※ 製作這種播放器的難點是調整每次顯示文字內容的時間段。大概是由於在網路中搜索到的「歌曲的mp3地址」與「同步歌詞」不配套的原因吧，歌詞總不能與歌聲同步，所以，必須調整每次顯示文字內容的時間段。調整的方法為：聽歌聲，看歌詞。看看歌詞比歌聲提前顯示還是推後顯示。如果歌詞提前顯示了，就把時間段往後推；如果歌詞推後顯示了，就把時間段往前提。調整文字內容的時間段，是個非常繁重的任務。但是，也是非常有趣的一件事情。代碼，神奇的代碼，它的功能多麼強大呀！它不僅可以控制文字，控制圖片，還能夠控制時間啊！一想到這一點，再繁重的任務也就不繁重啦。同步歌詞式播放器，我探討了好多天，測試了許多次，修改了無數次，終於製作成功啦！其中的每一點「苦」，都滲透著無數的「甜」！同步歌詞式播放器，也許會有簡潔的應用方法吧。讓我們共同探討吧！朋友，有這麼多的播放器可以供您選擇應用，給網頁添加背景音樂，你就不會患愁了吧？
作業：一、簡述手動播放器、自動播放器、顯示圖片的播放器與隱藏圖片的播放器各有什麼優點。二、簡述尋找歌曲mp3地址的方法，並親自試一試。三、簡述尋找歌曲同步歌詞的方法，並親自試一試。四、播放器代碼的應用，需要熟悉播放器的各種屬性與屬值。試著解析下面的屬性屬值：1、flashvars：（）；wzzh=40 （）；wzys=ff0000 （）；wzys1=ffff00 （）；s=1（）；mp3=……（）；lrc（）； （）；[00:01.06]（）。2、wenzi（）；wzzt（）；wzxt（）；wzyd=8（）；&（）；wzkd=680（）；wzys=FFCC00（）；wzzh=25（）；wzys1（）；wzct=1（）；wzxhx（）。五、把手動播放的單曲播放器，添加到你的一篇網頁中。六、把循環播放的單曲播放器，添加到你的一篇網頁中。七、把多首歌曲的mp3播放器，添加到你的一篇網頁中。八、把移動屏幕式播放器，添加到你的一篇網頁中。九、如果你有興趣話，試著把同步歌詞式播放器，添加到你的一篇網頁中。
「春天沒來」編撰2014年8月6日於北京
推薦閱讀：