微信小程序 wxParse 富文本解析新增音频mp3解析功能

wxParse 是目前微信小程序富文本解析最常用的工具了,但它在音频解析方面还有点小小的缺陷,无法解析音频。

也就是mp3 无法解析,文章内插入了mp3之后,小程序无法正常显示

针对 wxParse 音频无法解析问题,只需在wxParse 原代码上拓展一下代码,使得小程序能够比较完美地播放音频。

首先,在wxParse.wxml文件中,查询关键字 增加video标签支持,并循环添加 并在其后面添加以下代码

<template name="wxParseAudio">
  <!--增加audio标签支持,并循环添加-->
  <view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">
   <audio poster="{{item.attr.poster}}" name="{{item.attr.name}}" author="{{item.attr.author}}" src="{{item.attr.src}}" id="myAudio" controls="controls" loop></audio>
  </view>
</template>

添加完成效果图

然后也是在当前文件wxParse.wxml 内搜索关键字 video类型 并在其后面添加以下代码,搜出来多少处就添加多少处。我这边是 12 处

<!--audio类型-->
<block wx:elif="{{item.tag == 'audio'}}">
  <template is="wxParseAudio" data="{{item}}" />
</block>

添加完成效果图

接下来,在 wxParse.wxss 中添加 audio 的样式

.wxParse-audio{
    text-align: center;
    margin: 10px 0;
}
.wxParse-audio-audio{
    width:100%;
}

下面这个是最优的音频代码格式,没有也无所谓。音频地址对的就行。在需要添加音乐的地方按照这个格式来添加audio标签

<audio poster="图片地址" name="歌曲名" author="xiadmin" src="音频.mp3"></audio>

小程序实际显示效果。可以试一下不要作者或者歌曲名属性效果,有想法的优化一下显示样式,顺便告知下我:)

百度编辑器Ueditor添加上传本地音频MP3功能,可以查看这篇文章 https://www.xiadmin.com/38905

给TA支持
共{{data.count}}人
人已支持
工作日志前端

百度编辑器Ueditor添加上传本地音频MP3功能

2020-12-30 10:58:43

phpthinkphp工作日志

thinkphp 前后端分离的图像验证码拓展

2021-1-9 20:18:12

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索