和视频一样,对于音乐我也做了两种支持:本地上传mp3和在线百度搜索音乐播放。
## 本地mp3
![2015-06-22/55880f4d55408](http://box.kancloud.cn/2015-06-22_55880f4d55408.png)
上传视频和音频我都用了一个最习惯的插件Uploadify。
复用了同一个模板Post/video_up,只不过传了不同的参数和指定了不同的回调函数。
![2015-06-22/55880ff6befff](http://box.kancloud.cn/2015-06-22_55880ff6befff.png)
![2015-06-22/5588104176817](http://box.kancloud.cn/2015-06-22_5588104176817.png)
然后上传完后拼接一个多维form表单项。可以修改显示音乐的标题。
插入数据库后 列表显示:
![2015-06-22/558812d003dd0](http://box.kancloud.cn/2015-06-22_558812d003dd0.png)
用了audio js 的显示。
详情页多个本地mp3列表的效果:
![2015-06-22/5588133c02c99](http://box.kancloud.cn/2015-06-22_5588133c02c99.png)
## 在线百度音乐搜索和播放
其实ueditor支持音乐添加,问题是没有办法单独提取出一个按钮。
![2015-06-22/558811b33eebc](http://box.kancloud.cn/2015-06-22_558811b33eebc.png)
![可以分页,可在线试听](http://box.kancloud.cn/2015-06-22_558811d594d4e.png)
也提供了一个播放器
![2015-06-22/5588128116d17](http://box.kancloud.cn/2015-06-22_5588128116d17.png)
我的效果:
![搜索](http://box.kancloud.cn/2015-06-22_558813732bd27.png)
选择后和本地音乐一样,可补充标题
![2015-06-22/558813af2587d](http://box.kancloud.cn/2015-06-22_558813af2587d.png)
显示和ueditor一样:
![2015-06-22/558813f81d0a5](http://box.kancloud.cn/2015-06-22_558813f81d0a5.png)
那么,如何做呢?
首先,我们参考ueditor里百度音乐插件的逻辑,通过关键词搜索它的api
![2015-06-22/5588149e19c0d](http://box.kancloud.cn/2015-06-22_5588149e19c0d.png)
先用curl请求api:
![2015-06-22/55881515c5db3](http://box.kancloud.cn/2015-06-22_55881515c5db3.png)
返回的数据经过我们处理:
![2015-06-22/5588155baef70](http://box.kancloud.cn/2015-06-22_5588155baef70.png)
然后前端把那个数组提供给bootstrapTable插件作为数据源:
![2015-06-22/558815b444f2c](http://box.kancloud.cn/2015-06-22_558815b444f2c.png)
写上try_it的解析:
~~~
function try_it(value, row, index){
return '<a class="m-try" data-index="'+index+'"></a>';
}
~~~
并在弹窗后绑上试听按钮的功能:
![2015-06-22/55881616871d0](http://box.kancloud.cn/2015-06-22_55881616871d0.png)
就做出了类似ueditor的功能。
前台列表显示和之前视频一样:
![2015-06-22/5588164f8cd2c](http://box.kancloud.cn/2015-06-22_5588164f8cd2c.png)
通过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
- 附录