和視頻一樣,對于音樂我也做了兩種支持:本地上傳mp3和在線百度搜索音樂播放。
## 本地mp3

上傳視頻和音頻我都用了一個最習慣的插件Uploadify。
復用了同一個模板Post/video_up,只不過傳了不同的參數和指定了不同的回調函數。


然后上傳完后拼接一個多維form表單項。可以修改顯示音樂的標題。
插入數據庫后 列表顯示:

用了audio js 的顯示。
詳情頁多個本地mp3列表的效果:

## 在線百度音樂搜索和播放
其實ueditor支持音樂添加,問題是沒有辦法單獨提取出一個按鈕。


也提供了一個播放器

我的效果:

選擇后和本地音樂一樣,可補充標題

顯示和ueditor一樣:

那么,如何做呢?
首先,我們參考ueditor里百度音樂插件的邏輯,通過關鍵詞搜索它的api

先用curl請求api:

返回的數據經過我們處理:

然后前端把那個數組提供給bootstrapTable插件作為數據源:

寫上try_it的解析:
~~~
function try_it(value, row, index){
return '<a class="m-try" data-index="'+index+'"></a>';
}
~~~
并在彈窗后綁上試聽按鈕的功能:

就做出了類似ueditor的功能。
前臺列表顯示和之前視頻一樣:

通過id判斷是否在線音樂,然后兩種標簽搞定。
- 序
- 前言
- 內容簡介
- 目錄
- 基礎知識
- 起步
- 控制器
- 模型
- 模板
- 命名空間
- 進階知識
- 路由
- 配置
- 緩存
- 權限
- 擴展
- 國際化
- 安全
- 單元測試
- 拿來主義
- 調試方法
- 調試的步驟
- 調試工具
- 顯示trace信息
- 開啟調試和關閉調試的區別
- netbeans+xdebug
- Socketlog
- PHP常見錯誤
- 小黃鴨調試法,每個程序員都要知道的
- 應用場景
- 第三方登錄
- 圖片處理
- 博客
- SAE
- REST實踐
- Cli
- ajax分頁
- barcode條形碼
- excel
- 發郵件
- 漢字轉全拼和首字母,支持帶聲調
- 中文分詞
- 瀏覽器useragent解析
- freelog項目實戰
- 需求分析
- 數據庫設計
- 編碼實踐
- 前端實現
- rest接口
- 文章發布
- 文件上傳
- 視頻播放
- 音樂播放
- 圖片幻燈片展示
- 注冊和登錄
- 個人資料更新
- 第三方登錄的使用
- 后臺
- 微信的開發
- 首頁及個人主頁
- 列表
- 歸檔
- 搜索
- 分頁
- 總結經驗
- 自我提升
- 進行小項目的鍛煉
- 對現有輪子的重構和移植
- 寫技術博客
- 制作視頻教程
- 學習PHP的知識和新特性
- 和同行直接溝通、交流
- 學好英語,走向國際
- 如何參與
- 瀏覽官網和極思維還有看云
- 回答ThinkPHP新手的問題
- 嘗試發現ThinkPHP的bug,告訴官方人員或者push request
- 開發能提高效率的ThinkPHP工具
- 嘗試翻譯官方文檔
- 幫新手入門
- 創造基于ThinkPHP的產品,進行連帶推廣
- 展望未來
- OneThink
- ThinkPHP4
- 附錄