遇到一个项目,客户要求能在编辑框中上传录音文件。用的是Ueditor编辑器,但是却不支持本地MP3上传并使用audio标签播放,只能搜索在线MP3,实在有点不方便。这里说一下怎么修改,主要还是利用原来的【插入视频】的功能:

步骤一:
上传视频的时候判断格式,如果是音频格式的话则调用原来music的处理方法
需要修改文件:dialogsvideovideo.js
位置在于:查找“function insertUpload”,314左右开始修改

if (count) {$('.info', '#queueList').html('<span style="color:red;">' + '还有2个未上传文件'.replace(/[\d]/, count) + '</span>');return false;} else {var is_music = 0;var ext = file.url.split('.').pop().toLowerCase() ;var music_type = ['mp3','wav'];for(var i in music_type){if(music_type[i]== ext){is_music = 1;}}if (is_music) {editor.execCommand('music', {url: uploadDir + file.url,width: 400,height: 95});} else {editor.execCommand('insertvideo', videoObjs, 'upload');}}

步骤二:
修改原来music插件返回的标签格式从embed改成audio,如果你引用的是ueditor.all.min.js则需要重新压缩一次
需要修改文件:ueditor.all.js
查找位置:查找“UE.plugin.register('music',”,23607左右开始修改

function creatInsertStr(url,width,height,align,cssfloat,toEmbed){return  !toEmbed ?'<img ' +(align && !cssfloat? 'align="' + align + '"' : '') +(cssfloat ? 'style="float:' + cssfloat + '"' : '') +' width="'+ width +'" height="' + height + '" _url="'+url+'" class="edui-faked-music"' +' src="'+me.options.langPath+me.options.lang+'/images/music.png" />':'<audio class="edui-faked-music" controls="controls" src="'+ url+'" width="'+width+'" height="'+height+'" '+(align&&!cssfloat?'align="'+align+'"':"")+(cssfloat?'style="float:'+cssfloat+'"':"")+'>';// '<embed type="application/x-shockwave-flash" class="edui-faked-music" pluginspage="http://www.macromedia.com/go/getflashplayer"' +//     ' src="' + url + '" width="' + width  + '" height="' + height  + '" '+ (align && !cssfloat? 'align="' + align + '"' : '') +//     (cssfloat ? 'style="float:' + cssfloat + '"' : '') +//     ' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >';}

这样就可以在原来插入视频的地方上传音频文件,并且自动判断格式选择正确的标签显示了

Ueditor上传本地音频MP3相关推荐

  1. ajax上传本地音频文件,使用ajax将音频blob上传到文件夹中

    我正在构建一个录音项目,我想通过blob将音频上传到文件夹(上传). 这是我迄今取得的成就: var url = URL.createObjectURL(blob); var li = documen ...

  2. 【iOS开发】AFNetworking上传语音文件(.mp3)到服务器

    一.业务环境 将本地的录音文件 .caf 文件通过网络上传到服务器,服务器将此文件保存为 .mp3 格式. 二.实现思路 ( 1 ) 通过使用AVAudioRecorder,将录音文件保存到本地 ( ...

  3. 语音转写基于科大讯飞WebApi接口的安卓实现--上传录音音频翻译成文字

    一.目的与实现过程 1.目的:将.wav/.mp3音频文件翻译成文字 2.方式:基于科大讯飞语音转写 WebApi的安卓实现 3.机制:采用自定义计时器轮询. 4.坑点1:科大讯飞当前暂无安卓文档/代 ...

  4. laravel-admin引用wangEditor编辑器 使用二:上传视频/音频(2)

    完整的wangEditor.js代码 (function (global, factory) {typeof exports === 'object' && typeof module ...

  5. label-studio批量上传本地数据

    前言 Label Studio是一个非常好用的开源数据标注工具,拥有对包括音频.文本.图片.视频和时间序列等各种数据类型的标注能力,有简单易用的UI设计和多导出格式的支持,能够有利于数据准备和利用已有 ...

  6. C# Umeditor 编辑器上传本地视频、本地文件

    Umeditor 最近在做一个网站,涉及到网站文章的编辑.Umeditor是一个很好的选择,但是看了一下Umeditor,发现不能上传本地视频和本地文件,而项目又要得比较急,所以以我觉得最快的方式修改 ...

  7. QQ 非绿钻如何上传本地歌曲 作为空间背景音乐

    非绿钻如何上传本地歌曲 非绿钻如何上传本地歌曲: 网上的免费添加方法大多是添加网络链接,但要是 想在空间上传网上找不到的歌曲呢?很简单,无需找 什么上传网站直接用QQ邮箱搞定 第一步,打开QQ邮箱,打 ...

  8. js实现图片上传本地预览

    演示地址:https://xibushijie.github.io/static/uploadImg.html <!DOCTYPE> <html><head>< ...

  9. 一行js_Node.js 一行命令上传本地文件到服务器

    每次打包完, 都要打开 FileZilla 一顿拖拽然后才能上传代码, 那就立马撸一个自动化脚本就完事了 publish-sftp Github 传送门(~~~~顺便来骗个Star~~~~) 以后一行 ...

最新文章

  1. Weblogic禁用SSLv3和RC4算法教程
  2. Spark写Redis+Spark资源配置总结
  3. LeetCode Algorithm 202. 快乐数
  4. tars框架php,TarsPHP: TARS-PHP是针对php使用tars二进制协议,以及tars平台整体运维、RPC等一系列能力的解决方案...
  5. C++ 不懂的地方 记录01
  6. Python(20)-高级数据类型的公共方法
  7. BZOJ1027 [JSOI2007]合金 【计算几何 + floyd】
  8. 移动端click事件延迟300ms到底是怎么回事,该如何解决?
  9. mysql 打印_揭秘MySQL 主从环境中大事务的传奇事迹
  10. systen v消息队列(一)
  11. librdkafka的安装和使用
  12. 2021 编程语言排行榜
  13. oracle触发器update本表数据
  14. 成考本科计算机找工作有用吗,成人本科学历找工作有用吗 就业困难吗
  15. 安化哪里赏雪景?去云台山巅,一步一景,景景皆宜!
  16. 故事分享|B站up主的感悟:粉丝从0到1.4万,我做对了什么?
  17. GitChat · 安全 | 基于机器学习的 Webshell 发现技术探索
  18. Java 调用Python+Opencv实现图片定位
  19. Linux下的聊天软件
  20. 上市企业统计面板数据集(2011-2020年)

热门文章

  1. springMVC使用multipart实现Ctrl建批量上传图片
  2. 键盘F1~F12的用处!
  3. 中软国际有限公司c语言笔试,【求助】中软国际C++程序员笔试题
  4. SCRM和CRM有什么区别
  5. dji android ios,DJI Fly
  6. Redhat Linux红帽安装Java,以jdk1.8.0_171-linux-x64.zip为例
  7. 事后控制不如事中控制,事中控制不如事前控制 。
  8. 华为研究院19级研究员几年心得终成趣谈网络协议文档,讲解
  9. 欧式距离与曼哈顿距离切与比雪夫距离
  10. ​Kali-linux攻击路由器​