wxParse是目前微信小程序富文本解析最好的工具了，但它在音频解析方面还有点小小的缺陷，这篇文章就是针对wxParse音频解析部分做了一点改造，使得小程序能够比较完美地播放音频了。

首先，在wxParse.wxml文件中的

<template name="wxParseVideo">
  <!--增加video标签支持，并循环添加-->
  <view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">
    <video class="{{item.classStr}} wxParse-{{item.tag}}-video" src="{{item.attr.src}}" poster="{{item.attr.poster}}" autoplay="{{item.attr.autoplay}}"></video>
  </view>
</template>

下面添加audio标签支持：

<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>

接着再在代码中所有循环模版里的

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

下方加入

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

一共有十一处这样的地方，添加的时候请细心一点。

接下来，在wxParse.wxss中添加：

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

.wxParse-audio-audio{
	width:100%;
}

最后在文章发布的时候，在需要添加音乐的地方按照这个格式来添加audio标签：

<audio poster="图片地址" name="歌曲名" author="歌手" src="音频文件地址"></audio>

这样就实现了在小程序里添加音频文件直接播放音乐的目的。