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
