|
時下,網(wǎng)上用FLASH制作的MP3播放器隨處可見,使得很多音樂網(wǎng)站動感十足,而關(guān)于它的制作教程也俯拾即是(當(dāng)然,好的教程還是不少的,只是有更多是抄襲回來的)。
然而,這一類的播放器一直都只在動畫效果方面搞創(chuàng)新,筆者總覺得缺少些什么。。。。。
對了!就是少了個同步的歌詞播放器
自WINAMP出了個迷你歌詞以后,筆者一直心里癢癢的,想找個時間自己也做一個。
現(xiàn)在做好了,大家先預(yù)覽一下效果：
測試地址：download.incoo.com/blueidea/hbro/player/mp3player_x1.swf
其中歌詞就是現(xiàn)在標(biāo)準(zhǔn)的WINAMP的LRC文件,從別處下載的,沒作任何修改,
就是說,這個播放器可以用于播放WINAMP格式的LRC文件。該播放器的新功能:點擊歌詞后可以讓歌曲跳轉(zhuǎn)到相應(yīng)的位置。
一個小BUG：因為采用聲音流加載,所以網(wǎng)速慢的話,播放起來不太流暢。
主要使用的AS技術(shù)：
1、用XML對象的TOSTRING方法
2、數(shù)組的常用處理方法。
3、少量的字符串函數(shù)。
4、聲音對象的屬性和事件。
該播放器分為三部分：
1、記錄音樂文件路徑的播放列表
2、控制音樂文件播放的控制區(qū)
3、顯示歌詞的歌詞播放器
前兩部分是經(jīng)典MP3播放器所具備的。而且筆者不得不承認(rèn)自己做得不如別人,再加上相關(guān)的教程也很容易找,所以這里只介紹歌詞播放部分的制作。
因為播放歌詞是跟音樂同步的,所以,制作播放器,需要三類文件：
1、SWF格式的播放器,這是我們要做的
2、音樂文件MP3,相信大家都能下載到吧
3、歌詞文件LRC,是WINAMP格式的歌詞文件,可以到WINAMP的主頁下載,也可以到下面的站點下： www.rixiu.com/
文件準(zhǔn)備好了,下一步就是把文件置于適當(dāng)?shù)奈恢谩?BR>在里頭建立兩個文件夾Sound,Lyrics,和FLASH文檔PLAYER.FLA.Sound文件夾放入1.MP3,Lyrics放入文件1.LRC。
下面開始制作FLASH文件：
打開剛才創(chuàng)建的FLASH,在主場景第一幀輸入AS：
var song=new Sound();//創(chuàng)建加載聲音的對象
song.loadSound("Sound/1.mp3",true)//以數(shù)據(jù)流的形式讀取聲音文件。如要事件聲音,把TRUE改為FALSE;
song.start(0,1)//從頭開始播放聲音,循環(huán)1次。
以上是載入MP3文件的代碼,下面載入的LRC文件跟其同步。
聲音文件需要SOUND對象作為容器,同樣,歌詞文件也需要一個容器。但是FLASH沒有內(nèi)置的歌詞對象,所以就要自己創(chuàng)建。
在預(yù)覽圖里,我們所看到的顯示歌詞的"列表框"就是LRC文件的容器。下面將開始創(chuàng)建。
在主場景里創(chuàng)建一個MC,命名為lyricsItems,實例名相同。
創(chuàng)建了這個容器后,就可以用它來做讀取LRC文件的操作了。
所以,在聲音加載的同時,我們可以用它來讀歌詞文件。
在第一幀添加AS：
song.onLoad=function(){
lyricsItems.loadLyrics("Lyrics/1.lrc")//該函數(shù)將在lyricsItems里定義。
}
進入lyricsItems的編輯區(qū),在第一幀輸入AS：
function (filepath){
}
這樣就定義了讀歌詞的函數(shù)。
第一步,先讓LRC文件讀進FLASH。
也許大家會覺得奇怪,FLASH能讀LRC文件嗎?
大家不妨先用記事本打開LRC文件,發(fā)現(xiàn)它其實是個文本文檔。
對于文本文檔,其實FLASH的XML對象是可以讀到的。
筆者曾經(jīng)把一個錯誤的XML文件用XML對象讀取,發(fā)現(xiàn)XML對象的很多方法都調(diào)用失敗,可是TOSTRING方法卻可以,返回的是跟文本文檔內(nèi)容一樣的字符串(只有部分HTML字符發(fā)生了轉(zhuǎn)義),也就是說,用XML對象可以把LRC文件全部讀到FLASH里。
在loadLyrics函數(shù)里加入下面代碼：
var lyrics=new XML()
lyrics.load("Lyrics/1。lrc")
lyrics.onLoad=function(){
lyricsString=lyrics.toString()
trace(lyricsString)
}
測試影片,你會發(fā)現(xiàn)整個文本文檔被讀到了lyricsString里面。
下面就是分析LRC文件的結(jié)構(gòu),從里頭提取我們需要的信息。
出處：藍色理想
責(zé)任編輯：moby
上一頁 下一頁 FLASH打造LRC歌詞播放器 [2]
◎進入論壇Flash專欄版塊參加討論
|
第 1 頁 FLASH打造LRC歌詞播放器 [1]
第 2 頁 
