遇到一个项目,客户要求能在编辑框中上传录音文件。用的是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. 为什么说大盘很健康?
  2. 【组合数学】生成函数 简要介绍 ( 生成函数定义 | 牛顿二项式系数 | 常用的生成函数 | 与常数相关 | 与二项式系数相关 | 与多项式系数相关 )
  3. Mac OS X Glut build instructions
  4. 使用Travis-CI的SpringBoot应用程序的CI / CD
  5. [原]Linux 命令行浏览器
  6. ORACLE检索数据一致性与事务恢复
  7. 开启TOGAF架构之路
  8. 微信设置字体后微信浏览器页面字体也会跟着改变的解决办法
  9. 将 Word 转换为 Markdown格式【详细版本】2022.5.6
  10. 数据库实验2:简易登录页面设计(c#)
  11. 大型高并发高负载网站的系统架构
  12. 简单好用、且永久免费的内网穿透工具
  13. 利用人脸微笑数据集训练识别模型,完成对人脸图片微笑识别
  14. css如何将彩色图片变为黑白图片
  15. 怎样去除图片水印?教你一个一键去除水印的方法
  16. 周鸿祎360新手机真的会免费吗?
  17. linux 扫描磁盘柜,Linux下做磁盘阵列和各种热备份
  18. 头条粉丝红利期来了,最新涨粉攻略我真不想告诉你
  19. CSS/JS 实现滑动页面,到一定位置,position 定位设置为fixed,否则用absolute;
  20. chome浏览器中,console报错却不显示错误

热门文章

  1. mu4e查看图片和html代码
  2. Overture钢琴打谱软件出官方简体中文版啦
  3. 解决api-ms-win-core-processthreads-l1-1-1.dll文件丢失
  4. 幼儿在托育集体环境中,到底学到了什么?
  5. ios for 高通Vuforia图像识别+AR(二)
  6. 移动端H5下拉触底事件异常处理
  7. 一键生成印章,印章助手,这个软件是真的实用!
  8. word2016怎么显示出修改位置 如何查看修改内容
  9. EasyDarwin开源流媒体云平台之语音对讲功能设计与实现
  10. 使用Zabbix + Python对Mysql监控