微信公众号文章svg音频海报，点击图片播放和暂停音乐实现代码

微信公众号里的文章是可以做一些互动的，比如说图片点击播放音频，或者是图片点击之后切换等等都是可以做。具体实现思路就是用svg来做。

对于一些比较好的效果，例如点击图片播放音乐和暂停音乐，看了网上的一些资料，不太多。于是我们写了一个。具体实现步骤是：

1、上传音乐到微信公众号

2、预览之后，审查元素在代码里找到音频播放的mpvoice节点，里边有播放器相关的代码参数

3、复制相关的参数以下代码中，即可制作好代码：

<section style="margin: 0px 0%;box-sizing: border-box;" ><section style="overflow: hidden;line-height: 0;box-sizing: border-box;">&nbsp;<svg viewBox="0 0 1000 516.6667" xmlns="http://www.w3.org/2000/svg" style="box-sizing: border-box;"><foreignObject width="100%" height="100%" style="box-sizing: border-box;"><svg style="background-repeat: no-repeat;background-size: 100%;pointer-events: none;background-image: url(&quot;图片网址&quot;);box-sizing: border-box;" viewBox="0 0 1000 516.6667"></svg></foreignObject>

<span class="js_audio_frame db pages_reset audio_area "><span aria-labelledby="语音" id="voice_main_MzA5NjQ5MDQwOF8yNjUxNTQ3MjIz_0" class="appmsg_card_context db audio_card">       <span id="audio_card_bd_MzA5NjQ5MDQwOF8yNjUxNTQ3MjIz_0" class="audio_card_bd">         <strong id="voice_title_MzA5NjQ5MDQwOF8yNjUxNTQ3MjIz_0" class="audio_card_title" aria-describedby="语音标题" role="link">鸟叫.wav</strong><span class="weui-flex weui-flex_align-center">           <span class="weui-flex__item">             <span class="audio_card_opr">               <span id="voice_seekRange_MzA5NjQ5MDQwOF8yNjUxNTQ3MjIz_0" class="audio_card_progress_wrp">                 <span class="audio_card_progress">                   <span id="voice_progress_MzA5NjQ5MDQwOF8yNjUxNTQ3MjIz_0" style="width: 17.9607%;" class="audio_card_progress_inner"></span>                   <span id="voice_buffer_MzA5NjQ5MDQwOF8yNjUxNTQ3MjIz_0" class="audio_card_progress_buffer" style="width: 100%;"></span>                   <span id="voice_loading_MzA5NjQ5MDQwOF8yNjUxNTQ3MjIz_0" class="audio_card_progress_loading" style="display: none;"></span>                 </span>               <span id="voice_playdot_MzA5NjQ5MDQwOF8yNjUxNTQ3MjIz_0" class="audio_card_progress_handle" style="display: block; left: 17.9607%;"></span>               </span>               <span class="audio_card_tips" aria-labelledby="时长">                 <em id="voice_playtime_MzA5NjQ5MDQwOF8yNjUxNTQ3MjIz_0" class="audio_card_length_current" aria-hidden="true">00:01</em>                 <em id="voice_duration_MzA5NjQ5MDQwOF8yNjUxNTQ3MjIz_0" class="audio_card_length_total">00:09</em>               </span>             </span>           </span>           <span id="voice_play_MzA5NjQ5MDQwOF8yNjUxNTQ3MjIz_0" aria-labelledby="播放开关" class="audio_card_switch"><em id="audio_play_btn" class="weui-audio-btn" role="button"></em></span>         </span>          <span id="audio_card_control_MzA5NjQ5MDQwOF8yNjUxNTQ3MjIz_0" class="weui-flex weui-flex_align-center audio_card_playtool" style="display: none;">           <button type="button" id="audio_fast_back_MzA5NjQ5MDQwOF8yNjUxNTQ3MjIz_0" class="reset_btn audio_card_playbtn"><span class="aria_hidden_abs">后退15秒</span></button>           <button type="button" id="audio_double_speed_MzA5NjQ5MDQwOF8yNjUxNTQ3MjIz_0" class="weui-btn weui-btn_mini audio_card_playbtn_multiple">倍速</button>           <button type="button" id="audio_fast_forward_MzA5NjQ5MDQwOF8yNjUxNTQ3MjIz_0" class="reset_btn audio_card_playbtn"><span class="aria_hidden_abs">快进15秒</span></button>         </span>       </span>             </span> </span>&nbsp; &nbsp; &nbsp;</section></foreignObject></svg></section></section>

4、找个微信公众号编辑器，在HTML模式下给代码写进去，然后复制即可保存到微信公众号文章中。

5、发布，即可实现想要的效果。

当然，这篇文章因为牵涉到代码，普通人员可能不太容易操作。如果需要制作各种svg效果，欢迎联系野狼网络营销。