Silver Star ,team.

Blog Applied：MIXPOD - Create A Music Playlist [教學]
支援多曲目的MP3及YouTube的播放器 - MIXPOD教學


MIXPOD是一個支援多曲目的音樂播放器Widget
這個Widget除了單純播放MP3音樂外
也可以播放YouTube的影片
但是無名相簿的mp3音樂是不行的
印象中無名的音樂不支援跨網域外連
所以在MIXPOD的播放清單使用時會遭到封鎖
甚至連帶自己相簿裡的音樂都沒辦法播放

如果你的問題是不知道無名的程式碼怎麼安裝
點我直接跳到安裝程式碼

個人比較推薦供MIXPOD使用的MP3直接連結空間：OpenDrive
空間大小：5GB
流量限制：1GB/天
記得要enable direct-link才能使用







他會要求你貼一個包含OpenDrive網頁連結或是LOGO的網址
其實只要自己在部落格的側邊欄新增一個OpenDrive的網址
然後用自己部落格的網址就行了
解鎖後Direct Link(stream)的網址就是可以在MIXPOD使用的

進入正題
首先我們連結到MIXPOD的首頁




在中間或右上角找到「Sign Up」開始申請新帳號



依序輸入資料
生日和Location都可以用鍵盤輸入節省時間
完成後按「Sign Up」

到信箱收取認證信按下確認連結後就可以開始使用了



按下上方選單的Create Playlist開始建立播放清單



上方的搜尋列可以搜尋YouTube影片
但是在這個區塊只能用英文搜尋
若要搜尋中文的影片必須回到首頁(左上角的MIXPOD圖標)
利用首頁的搜尋列進行搜尋

影片右方的按鈕可以提供預覽(Play)和加入播放清單(+號)
播放器下方為播放清單
可以按下編輯或X刪除該曲目

上方的Add URL按鈕可以自行加入MP3檔案連結或YouTube影片網址



MP3檔案連結必為 "http://" 開頭 ".mp3" 結尾
即為http://XXX.XXX.mp3
YouTube影片網址格式則為 http://www.youtube.com/watch?v=影片編號

但是經過測試後發現以Add URL的方式加入YouTube影片會發生問題
在建立播放清單期間可以正常播放
但完成建立後會無法播放
如果想加入特定的YouTube影片則直接將影片的網址放到搜尋列搜尋即可
即是直接搜尋「http://www.youtube.com/watch?v=影片編號」

作者和標題的標籤欄位不得空白
但可以只打一個空白鍵

完成後按下「Add Track」新增該曲目



播放器下方的清單可以直接拖曳改變順序
按下可以進行編輯



出現Edit Title的畫面
Title有兩種格式可以使用

第一種為「-」號區隔
範例圖為：歌曲名稱 - 演唱者
可以發現歌曲名稱跟演唱者弄反了



另一種為 歌曲名稱 by 演唱者



現在我們完成了新增歌曲
接下來就要做外觀的和功能的調整



按一下Customize
目前為Skin的頁面
這個頁面可以選擇播放器面板
在播放器面板點一下即可變更面板
有一點要注意的是
如果你的播放清單有包含YouTube影片
就只能使用上方的 Video & MP3 Skins 面板
下方的面板則只能播放MP3音樂

接下來我們可以變更面板的顏色
按一下Skins右方的Colors and Style



點一下上方的色塊可以叫出調色盤變更顏色
不過在改顏色時有點延遲就是了
或者可以點擊下方的Preset Palette選擇預設的樣式
每次出現的預設的樣式都不相同
如果想看其他的預設樣式可以重新整理頁面
重新回到Colors and Styley做選擇



Use Gradient是使用漸層色
下方的Style為播放器的花樣



預設的MIXPOD這個Skin沒有支援
我們以MIXPOD Nano這個Skin來做範例

此為沒有使用漸層的原始圖樣


以下兩張圖片
左邊是使用Gradient漸層後的效果
右邊的則是再加上Style花樣



接下來我們要做播放器的設定
按一下Settings



Autoplay：自動播放
Shuffle：隨機播放
Loop：重複播放
Privacy：設定為公開/隱藏的播放清單
Volume：起始音量

完成後按一下Save Playlist儲存播放清單



只有Playlist Title為必填
其他都可以略過


按一下下方「SAVE(get code)」按鈕取得內嵌程式碼



按一下左邊Other Sites選項
把中央的程式碼全部複製下來
新增一個純文字文件把複製的的程式碼貼上
以便對程式碼作一些整理

quality="high" wmode="window" bgcolor="FFFFFF"
flashvars="mycolor=FFFFFF&mycolor2=54CCFF&mycolor3=575757
&autoplay=true&rand=0&f=4&vol=100&pat=0
&grad=false"
width="410" height="311" name="myflashfetish" salign="TL"
type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"
border="0" style="visibility:visible;width:410px;height:311px;" />



Create a playlist at MixPod.com

按下Ctrl F 搜尋 embed以方便做整理
我們需要的只有中間那一段完整的內容 >
其餘為MIXPOD LOGO的語法可以直接刪除
把內容 >直接複製下來就可以直接使用
記得將資料夾的高度和寬度設定成跟語法內容一樣
（語法最後的width:410px;height:311px;" 中的值）
以免造成部分播放器被切掉

在無名網誌側邊欄新增連結使用時
為避免在其他瀏覽器(例如FireFox)將整個視為連結區塊
因此要在前加上

這樣就已經完成所有的安裝了
如果不想看進階說明請直接跳到編輯播放清單
點我跳到編輯播放清單

如果對自訂MIXPOD播放器大小的方法和一些屬性值有興趣請繼續往下閱讀

接下來我以標準的Flash內嵌語法來做一些進階的說明



按一下左邊無名的LOGO
把中央的程式碼全部複製下來
新增一個純文字文件把複製的的程式碼貼上
以便對程式碼作一些整理和變更

接下來在該文件裡把所有的<>做區隔
可以用Ctrl + F 搜尋功能搜尋 >< 方便做區隔
以後的程式碼為LOGO可以全部刪除

alt="Music" title="Get Music Tracks!" border="0"> target="_blank"> alt="Playlist" title="Create Your Free Playlist!" border=0> src="http://www.mp3asset.com/images/btn-get-ringtones.gif" alt="Ringtones"
title="Get Ringtones From This Playlist!" border="0">
Create a playlist
at MixPod.com

以後的程式碼可以全部刪除

接下來我們尋找我們需要的標籤值

第一行的高度和寬度數值
若不變更播放器尺寸
在側邊欄新增資料夾時高度寬度以程式碼的數值為準
height="311" width="410"

播放器swf檔案網址，即value值
"http://www.mp3asset.com/swf/mp3/mixpod.swf" />

FlashVars的參數值，即value值


如果仔細看會發現參數值內的屬性以「&」連接

部分參數的意義：
myid是播放清單的編號
mycolor、mycolor2、mycolor3分別是播放器的顏色
為設定外觀時上方三個色彩由左至右排列
autoplay為自動播放的布林值true/false
rand是隨機播放的數值，0關閉/1開啟
vol為起始音量的數值
pat為播放器style的值0~18
grad為使用漸層色的布林值true/false

你可能已經發現到我們需要的標籤值
在前面文章提到的用Other Sites 產生的語法內容也有出現過

接下來我們就比照embed語法方式
把 object 的程式碼改成 embed 語法



調整MIXPOD播放器尺寸：

若要調整MIXPOD播放器的大小
則要在FlashVars的value值後加上這兩個屬性：
&ow=寬度&oh=高度
width 跟 height 標籤的值也要跟著變更
之後在新增資料夾安裝Widget時資料夾的高度和寬度也要一致或較大
否則播放器有些部份會被切掉

要注意的是有些播放面板有維持比例的條件（例如MIXPOD Nano）
因此高度和寬度要維持比例才能把播放器放大或縮小

例如 Nano面板預設為165*382
若想把寬度改成210，按照比例計算高度應為486.18
如果設定高度小於486.18
則寬度則會跟著小於我們想要設定的210
反之設定高度大於486.18的話
則寬度則會是我們要的210

修改好語法後就可以貼上資料夾的連結了


若想要製造透明效果請參考CSS Alpha Filter



日後如需修改播放清單
只需在上方選單按下My Playlists即可做管理



每個播放清單的圖片都以影片的縮圖呈現
右方有許多編輯選項的按鈕





之後的操作方式都跟建立播放清單時一樣
若只是修改曲目則不需要重新安裝程式碼

如果你知道程式碼的那些數值怎麼使用
又想要節省時間
直接用以下的語法產生器吧

自製的MIXPOD無名語法產生器



如果發現教學有任何錯誤的地方
或是有使用上的問題
請直接回應文章
感謝

---

本著作由Evan‧A‧D‧E製作
以創用CC Attribution-NonCommercial-NoDerivs 3.0 Unported 授權條款釋出。