目前日期文章:20070128 (2)

瀏覽方式: 標題列表 簡短摘要

教你如何製作MP3 Player~做一個專屬自己的音樂盒~

 


本文參考314、隨意、獨來獨往的Flash播放器教學。


玄音受益良多,今再把它整理圖解說明。


讓您更能上手應用 MP3 Player,做個屬於個人風格的MP3音樂盒。


感謝~


多重聯播音樂語完整教學314分享


http://tw.myblog.yahoo.com/monkey_014148/article?mid=4286&page=1#4996


感謝 無名-↙ 隨 意 ~ 《Jiang﹏Yun》* 分享


http://www.wretch.cc/blog/JiangYun&article_id=3759040&page=3#comment63158504


感謝-無名-獨來獨往 分享


http://www.wretch.cc/blog/yehcathy&article_id=2928536&page=3#comment62928630


感恩三位大大無私的教學分享~


 



 


作法:


 


 首先要有一個自己的 網路空間 ,才能上傳文件。


 玄音建議若是沒有 網路空間 的朋友,可以使用奇摩個人網頁,或者教您如何 申請雅虎香港網頁空間教學

 請把要放進音樂盒的歌曲網址找出來。


  (※注意: 網址要絕對是網路空間上的網址,且能連結的喔!可以先試聽看看。)


 



 


步驟一 請先下載 FLASH MP3 PLAYER 播放器。


 


下載點:


 


 FLASH MP3 PLAYER(正常版)


 FLASH MP3 PLAYER(縮小版)


 IPOD型式


 


※ 三種版型差別在於面版不同。其製作方法都是一樣的。


正常版↓



縮小版↓



IPOD型式↓



 



 


步驟二 請選一個喜歡的版型下載,完成解壓縮後,會在您解壓的路徑位置看到圖一裡的所有檔案。(玄音選擇正常版測試製作音樂盒。)


 


圖一 解壓縮後,會看到這些檔案。


 



 


※ 或只是看到一個資料夾。(只要在資料夾點選兩下,直到出現圖一裡的檔案為止。)


 



 



 


步驟三 


 


1. 點選 mp3player.XML,按右鍵,點選內容。


 



 


2. 點選內容後,會出現內容視窗,請點內容進入↓


 



 


3. 出現mp3player.XML 內容視窗,請點擊變更按鈕。↓


 



 


4. 進入變更後,會出現開啟檔案視窗,請點選Notepad(記事本),再按確定。↓


 



 


5. 開啟檔案視窗按確定之後,內容視窗也要按確定。然後會回到檔案畫面。


 



 


6. 這時再點擊 mp3player.XML 兩下,就可以打開記事本了。


 



 



 


步驟四 編輯記事本內容,看是要調整語法指令,或是添加歌曲,或是修改名稱。


 


1. 把要放入音樂盒的歌曲網址照記事本的指示,一一貼入記事本中。


 


下列語法為記事本原本內容↓


  

UTF8"?>
autoStart="random">


   MP3網址" title="歌名-歌手" />
   MP3網址
" title="歌名-歌手" />



 


↑語法說明:


 


player showDisplay="yes" showPlaylist="yes" ←(是否顯示歌單)


autoStart="random" ←(是否自動播放或隨機播放 yes/no/random)


" title="音樂名稱" ( "歌名-歌手")/>


儲存檔案時一定要存成 .UTF-8


 



 


2. 在最上面解說時,我有把歌曲網址都列出來,現在一一將它貼入記事本裡面了。


  貼好了之後,就要存檔囉!點記事本的檔案進入,選另存新檔。下圖所示。↓


 



 



 


※ 注意: 


 


 有時網路空間分享的音樂網址,會有時間限制,而被刪除。


  或者上傳者刪除而無效。所以在放入音樂盒之前一定要先試聽看看。


  若不想音樂不能連結而無法聽,那麼就自己上傳到網路空間。


  可以上傳到Xuite或是奇摩個人網頁。


  音樂檔都必須是mp3,且須放置在網路空間的。可依自己的需求 複製 調整 音樂多寡 。


 



 


步驟五 以上都步驟都OK後,就要把修改好的記事本內容存檔了。


    記事本→檔案→另存新檔→


 


    ※ 用另存新檔存檔比較好


    ※ 檔名一樣取 mp3player


    ※ 編碼一定要選UTF-8


    ※ 存檔時,絕對要記住存檔路徑喔!


 



 



 


步驟六 儲存完後要開始上傳檔案。


 


 1. ↓登入奇摩,開啟奇摩個網(或其他個人網頁)開始上傳。


 



 


 2. 點右上角的檔案總管進入→然後將拉桿拉到下方瀏覽器上傳


 3. 點瀏覽進入,下圖中四個藍色檔案都要上傳喔!


 4. 瀏覽進入自己的電腦硬碟,找到剛剛存檔的檔案路徑,點選開啟後,再點選,逐一將這檔案點選。


 



 


5. 四個檔案都點選完後,會列在瀏覽表上請按上傳檔案。(奇摩一次可上傳五個檔案,開始上傳了)


※ 也可以只上傳 mp3player.XML 和 mp3player.swf 這兩個檔案。


 



 


6. 檔案上傳成功了。


上傳成功後,只要叫出mp3player.swf 網址,再套上語法,就可以把自製的音樂盒貼在部落格了。


 



 


※ 到這裡, MP3 Player 音樂盒終於完成了直接點上傳成功的 MP3 Player.swf ,可以馬上驗收成果喔。)


 



 


步驟七 奇摩部落格中插入播放程式介面語法:


 


語法範例:


 


mp3player.swf的網址" width="270" height="280">

 


 


 



 


其他顏色播放器下載


面版修改者為-無名-獨來獨往 站長~感恩分享~


 ※下列面版皆為縮小版使用。


 


0.原版 1. 黑色版 2. 粉紅版 3. 黑紅版 4. 深紫版 5. 紅色版 6. 粉藍版


7. 天空藍 8. 9. 粉紫版 10. 淺粉紅 11. 鵝黃版 12.草綠版




 


面版 更換方法:


下載喜歡的面版色檔案,解壓縮之後~(解壓縮之後是 .SWF 檔)


再上傳到個人網頁空間覆蓋就可以了。


檔名要一樣是:mp3player 這樣才能覆蓋原來的.SWF 當喔。


 



問題集:


 


€ 調播放器背景的寬高是加入:width="130" height="180" ←可以自行測試調整。


€ 如何在XUITE的空間中上傳音樂檔請參考314教學檔。


 圖解免費的 影音 部落格 申請教學


 XUITE部落格音樂、影片 下載法


€ 播放器背景灰灰的 ←在語法中加入 wmode="transparent" (在奇摩部落格這個指令無效.)


€ 好用的音樂轉檔(感謝314教學)  2005音樂精靈


http://tw.myblog.yahoo.com/jw!zo1RlCmfHxlEo2UTXCcDzads5GkC/article?mid=537


€ 為甚麼歌跑的不順或太快?


音樂檔若有這種問題,建議你換一個音樂檔。
通常一般的 音樂檔, 都設定在128bit,44100赫茲。
128bit 高 就會變快。 反之 就會 變慢 用
轉檔也可以解決這個問題。


 


PS:歡迎引用指教,所有圖檔皆為空間網路網址,所以複製時就不用擔心圖圖會不見了。










cookie 發表在 痞客邦 留言(0) 人氣()

藍線框CSS範本

感謝314大師的分享


藍色框線CSS 範本


中文解說 的 藍色框線-CSS範本


文章前小圖  標題前小


滑鼠 性別圖 框線 全套效果都包含


適合任何尺寸背景圖


方便大家 改變 改圖改顏色


此版範本-適合任何尺寸背景圖


.........


套用範本 不會影響 原本 自定欄位的設定


 自定欄位的設定 不會變動


CSS 跟自定欄位 是不同的


............


當你的CSS 亂掉 又忘了存檔


可以拿這範本救急


你也可以拿這範本 當基礎


修改或添加 新的 CSS語法



藍色框線-CSS範本 語法↓


適合任何尺寸背景圖


 


/*customization CSS*/

/*Links文章去除連結底線*/a,a:link,a:visited{color:#660000;text-decoration: none}
a:hover{color:#FF0000;background-color: #CCFFFF;text-decoration: none;}
a {text-decoration:none}
a:hover {position: relative; top: 2px;left:2px;}


/*Article content module標題前小圖*/
.yblogcnt .blgtitlebar {margin-bottom:10px;zoom:1;}
.yblogcnt .blgtitlebar h2 {font-size:150%;font-weight:bold;background:url(http://i1.tinypic.com/nbtzj5.gif) no-repeat;padding-left:30px;font-family:華康少女文字W3;}

/*捲軸*/
html{
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #0033FF;   
scrollbar-shadow-color: #0033FF;  
scrollbar-3Dlight-color: #ffffff;   
scrollbar-arrow-color:#0033FF;    
scrollbar-track-color: #ffffff;
scrollbar-darkshadow-color:#ffffff }


/*滑鼠*/
body{cursor:url(http://ashine0118.myweb.hinet.net/catrun2.ani)}
a:hover {cursor:url(http://ashine0118.myweb.hinet.net/kuroihito.ani)}



/*Master header奇摩頂圖*/
#yhtw_masthead{background:#FFFFFF;background-image: url(http://sheng.phy.nknu.edu.tw/back-157.gif);color:#CCFFFF;filter:alpha(opacity=100); opacity:0.30; moz-opacity:0.5;font-family:華康少女文字W3;padding-left:20px;font-size:130%}
#yhtw_masthead a,#yhtw_masthead a:link,#yhtw_masthead a:visited,#yhtw_masthead a:hover{color:#ff0000;}


/*Nav module header左右欄標題圖*/
.yc3sec .mhd, .yc3subbd .mhd, .yc3sec .mhd a, .yc3subbd .mhd a,.yc3sec .mhd a:link, .yc3subbd .mhd a:link,.yc3sec .mhd a:visited, .yc3subbd .mhd a:visited{background-image : url(http://sheng.phy.nknu.edu.tw/back-157.gif);}


/*Nav module body左右欄狀態列內容圖*/
.yc3sec .mbd, .yc3subbd .mbd, .yc3sec .mft, .yc3subbd .mft{ background-image: url(http://www.wish1234.f4w.net/bg/bgblue116.gif);}

/*Main content header文章標題圖*/
.yc3pribd .mhd{ background:url(http://sheng.phy.nknu.edu.tw/back-157.gif) repeat; color:#663300;}

/*Main content body文章背景圖*/
.yc3pribd .mbd, .yc3pribd .mft, #yreplymsg table, #ysbscrblist table, #ybloginfo table, #yusrinfo table, #yusrintro p{background-image:url(http://www.wish1234.f4w.net/bg/bgblue116.gif);
color:#000000} #ymodcal .mbd td strong {color:#FF6600;}

/*Blog title部落格名-顏色設定*/
#yblogtitle .mbd,#yblogtitle .mft{background-color:#0000FF; color:#0000FF;font-family:標楷體;font-size:130%}
#yblogtitle h1{color:#0000FF;font-family:華康少女文字W3;font-size:130%}

/*Background image for whole page背景圖*/
BODY { background: white url(http://sheng.phy.nknu.edu.tw/back061096.jpg);background-attachment: fixed }

/*Background image for blog title部洛格標題橫框*/
#yblogtitle .mbd {background-image: url(http://www.wish1234.f4w.net/bg/bgblue116.gif); background-repeat:repeat-x}

/*Opacity for blast招呼與圖框*/
#yblast .bg {zoom:1; filter:alpha(opacity:50); background: url(http://sheng.phy.nknu.edu.tw/line-58.gif) no-repeat}

/*性別圖*/
#ymodprf .horos img{display:none;}
#ymodprf .horos{width:100px;height:120px;background:url(http://sheng.phy.nknu.edu.tw/06003001.gif) center no-repeat;}

/*Module latest upup更新日期前圖*/
#ymodupdate .mbd .date{background:url(http://pic.23717.com/pic/icon/icon2/13/69.gif) left center no-repeat;padding-left:7px;font-size:89%;font-family:verdana;}


/*Nav module list左右欄內標題前小圖*/
.ycntmod .mbd ul.list li {background:url(http://pic.23717.com/pic/icon/icon2/13/69.gif) left .3em no-repeat;padding-left:15px;margin-bottom:2px;_margin-bottom:3px;_line-height:1.5em;}
.ycntmod .mbd ul.list li.more {margin:-3px 0 0 -3px;text-align:right;background:url(http://i16.photobucket.com/albums/b6/lovecincin/4c1e9818.gif) 15px center no-repeat;}

/*Opacity for blogtitle上橫框 框線*/
#yblogtitle .rctop, #blogtitle .rctop div, #yblogtitle .rcl, #yblogtitle .rcr, #yblogtitle .rcbtm, #yblogtitle .rcbtm div {zoom:1; filter:alpha(opacity:77)
border-bottom:3px double #0033FF ;
border-top:3px double #0033FF;
border-left:3px double #0033FF;
border-right:3px double #0033FF }

/*Opacity for sub column左右欄框線*/
.yc3subbd .rctop,.yc3subbd .rctop div,.yc3subbd .rcl,.yc3subbd .rcr,.yc3subbd .rcbtm,.yc3subbd .rcbtm div, .yc3sec .rctop,.yc3sec .rctop div,.yc3sec .rcl,.yc3sec .rcr,.yc3sec .rcbtm,.yc3sec .rcbtm div {zoom:1; filter:alpha(opacity:79)
border-bottom:3px double #0033FF;
border-top:3px double #0033FF;
border-left:3px double #0033FF;
border-right:3px double #0033FF}

/*Opacity for main content文章區框線*/
.yc3pribd .rctop,.yc3pribd .rctop div,.yc3pribd .rcl,.yc3pribd .rcr,.yc3pribd .rcbtm,.yc3pribd .rcbtm div {zoom:1; filter:alpha(opacity:78)
border-bottom:3px double #0033FF;
border-top:3px double #0033FF;
border-left:3px double #0033FF;
border-right:3px double #0033FF}


/*部落格大框線*/
body {border: 5px double #0033FF ;} 


 


/*Subs list訂閱部落格*/
 div#btnsbsrb a{display:block;width:88px;height:31px;overflow:hidden;background:url(http://img227.imageshack.us/img227/1671/p1120462118141by3.gif) no-repeat;margin:0;}
 div#btnsbsrb_nologin a{display:block;width:88px;height:31px;overflow:hidden;background:url(http://img227.imageshack.us/img227/1671/p1120462118141by3.gif) no-repeat;margin:0;}
 #yblogtitle .tft {text-align:right;padding-bottom:0px;position:relative;}


 

藍色-改色碼   ←color:#904E0E


紅色-放圖片網址  ← 圖片要放網際空間上的圖片


opacity:100  ←不透明


opacity:0      ←透明


font-family:標楷體 ←字體


css範本使用法↓選


請進入 管理部落格 面板設定訂樣式


將你的css語法 清除建議你先 複製 存檔


貼上css 範本儲存→看結果



cookie 發表在 痞客邦 留言(0) 人氣()