[Blogger使用心得]於blog文章或側欄使用Google mp3播放器(Adding Google mp3-player in your blog)

[注意]自20121109(Fri.)起, 本內容局部已不具實用功能, 僅供參考; 另請參..
< Blogger使用心得>於blog文章或側欄使用Wikipedia的mp3播放器(Adding wikipedia's mp3-player in your blog)

Google mp3播放器如下..

1. 目標..

於blog文章或側欄使用Google mp3播放器, 如圖1所示..

圖1-位於文章與側欄的mp3播放器

2. 做法..

2.1. 要先取得一首mp3音樂檔案的鏈結網址, 其可行的方法之一是將該檔上傳至自己的Google Sites(Google協作平台)或Google Docs(Google文件), 檔名最好使用英文字母或數字;


關於Google Sites(Google協作平台)..要將儲存該上傳檔案之協作平台的Permissions(權限)設為Public on the web(若不如此, 則其他瀏覽者便無法收聽, 進行此動作前請先考量風險問題);


關於Google Docs(Google文件)..設定已上傳檔案的Share(分享), 將其Sharing settings...(分享設定)的Permissions(權限)設為Public on the web(若不如此, 則其他瀏覽者便無法收聽, 進行此動作前請先考量風險問題);


完成上述動作後, 以滑鼠右鍵點擊該檔的下載(Download)鏈結, 以游標選擇複製連結網址(E)功能, 如圖2所示..

圖2-取得mp3檔案位置

就可得到以下的該檔網址, 如從Google Sites處所取得..
https://sites.google.com/site/poettw56921974010/TheHarvestFestival-20101127.mp3?attredirects=0&d=1


或從Google Docs處所取得..
https://docs.google.com/uc?id=0B8h2Bq_4zMSMzdlOWEtY5kD1974ktYzG8GANMAIN9DM3&export=download&hl=en
兩者取其一用, 紅字部分表示可以刪去.

P.S. 由於Google Docs改成雲端硬碟, 所以有些功能也會有所改變, 如由該處取得mp3網址的方法為..
以滑鼠左鍵點擊 '共用' 功能(位於螢幕右上方處), 之後會跳出一個名為 '共用設定' 的欄框, 複製其 '共用連結' 內的網址, 如下..
https://docs.google.com/open?id=0B8h2Bq_4zMSMzdlOWEtY5kD1974ktYzG8GANMAIN9DM3
將該址中的open改成uc, 如下..
https://docs.google.com/uc?id=0B8h2Bq_4zMSMzdlOWEtY5kD1974ktYzG8GANMAIN9DM3
如此就可被代入以下的語法中使用了.
(本法自20120704起使用)

20130917(Tue.)補充:
若從Google Docs處得到的網址格式類型如下:
https://docs.google.com/file/d/0B8h2Bq_4zMSMRi1wR15WD3WGM/edit?usp=sharing
截取綠色的部分將之改成:
https://docs.google.com/uc?id=0B8h2Bq_4zMSMRi1wR15WD3WGM
即可應用於播放器中


2.2. 將該檔網址取代以下語法的紅字部分..
<embed align="middle" allowscriptaccess="sameDomain" height="27px" name="Player" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://mail.google.com/mail/html/audio.swf?backgroundColor=0xEEEEEE&amp;autoPlay=true&amp;audioUrl=此處加入mp3檔案網址" type="application/x-shockwave-flash" width="240px"> </embed>


其中,
autoPlay=true&amp(綠字部分)為自動播放功能, 如不需要則將之刪除即可;
http://mail.google.com/mail/html/audio.swf(藍字部分)為播放器的所在位置, 若播放器不能正常顯示時, 有可能此網址失效.
height="27px"(紫字部分)為可變更之播放器高度.
width="240px"(橘字部分)為可變更之播放器寬度.
完成後就能將該語法貼於blog文章或側欄位置.


2.3. 將該語法貼於blog文章或側欄..
2.3.1. 將該語法貼於blog文章, 做法是..
進入自己的blog> 文章> 新文章(或修改文章), 切換至修改HTML模式(如圖紅圈所示), 然後將該語法貼入欄內任一位置> 發佈文章> 檢視網誌, 如此即可, 如圖3所示..

圖3-語法貼入文章欄中

2.3.2. 將該語法貼於側欄, 做法是..

進入自己的blog> 設計> 網頁元素> 新增小工具> 文字(或HTML/JavaScript), 點擊加入鍵(如圖4紅圈所示)> 標題, 輸入識別文字, 但也可以不寫> 內容, 切換至修改Html模式(如圖5紅圈所示), 將該語法填入欄內> 儲存> 檢視網誌, 如此即可.

圖4-加入小工具

圖5-語法貼入小工具欄中

 

 

 

3. 感謝..

感謝網路上每位資訊提供者, 因為有您們無私的貢獻, 讓大家才有更美好的表現.