🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
和视频一样,对于音乐我也做了两种支持:本地上传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判断是否在线音乐,然后两种标签搞定。