Hoyo 教你 Web Audio API – 01. 從 HTML5 Tag 開始,讓音樂從網頁播放

Hoyo 教你 Web Audio API 系列目標是教同學如何建立自己的音樂串流平台

  • RWD,跨平台
  • 串流
  • 存取控管,付費內容或是隱私不公開
  • 點一次播放聽一整天
  • 搜尋歌曲,分類、歌手、曲目名稱
  • 錄音

一、拿香跟拜

  1. 在桌面準備一個測試網頁 audio.html
  2. 使用記事本或其他純文字編輯器 (Sublime Text) 開啟 audio.html
  3. 拿香跟拜,或是直接下載 audio

雙擊開啟 audio.html 看到類似這樣的網頁,並且點選播放可以順利聽到音樂就成功了

二、不同的瀏覽器、不同的播放介面

Hoyo 相信大多數的網頁畫面都和上面那張不同,應該比較接近下面這樣

除了畫面長相不同之外還多了下載按鈕,當然也有可能長這樣

為了統一播放介面所以接下來就必須 Hoyo 教你 Web Audio API – 02. 簡易播放介面

48 total views, no views today

Canvas framework

 

 

應用

 

hoyo 自己的應用

需求為從主機載入一張圖之後,可以增加箭頭、文字、方框等基本的繪圖需求,編輯完成按儲存後要直接回存。

技術:HTML5 Canvas

使用工具:Fabric.js

參考

image-346

 

73 total views, 3 views today

HTML5 的拖拉檔案上傳 ( Drag & drop files Upload )

參考:

重點有

  1. 將物件設定為可拖 (Drag) 的狀態,在此是想要實現拉檔案到網頁直接上傳,所以此步驟可省略
  2. 在指定的對象放開檔案 (Drop) ,設定觸發的 ondrop 事件
  3. 從事件的 dataTransfer 物件內取得所需資料

將功能實作成 jQuery Plugin

參考: How to Create a Basic Plugin

如此就可以自己包合用的外掛

html5uploader

請到這裡下載: html5uploader – Drag & drop files to browser using HTML 5, PHP and JS – Google Project Hosting

實作步驟

  1. 使用 Google Chrome 或 Mozilla Firefox 測試功能
  2. 修改 uploader.php 上傳處理及路徑
  3. 上傳頁面增加表單檔案上傳,處理不支援 HTML5 瀏覽器
  4. 整合系統,增加傳遞值。主要工作在 HTML5 JavaScript 的 HTML POST 格式處理

上傳網頁處理,增加不支援 HTML5 的表單上傳

上傳頁面改用 jQuery 載入 Javascript 以及增加系統所需傳遞參數

使用 Mozilla Firefox 的 Live HTTP Headers 附加元件追蹤 HTTP header

瞭解 HTML POST 格式後,修改 html5uploader.js 程式

Firefox 3.6 中文檔名傳遞錯誤問題

參考此篇 ajax中文拋出異常 – ITeye問答 ,將 filename 使用 encodeURI() 處理即可

對於 uploader.php 的認知, elseif () 那段和上傳方式沒關係

188 total views, 3 views today