当前位置:首页 > 技术方案 > 详情

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

发布时间:2021-08-26   浏览次数:64次   作者:admin    标签:郑州seo 郑州seo推广 郑州网站推广

微信公众号里的文章是可以做一些互动的,比如说图片点击播放音频,或者是图片点击之后切换等等都是可以做。具体实现思路就是用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>

<foreignObject width="100%" height="100%" style="box-sizing: border-box;">
<section style="overflow: hidden;opacity: 0;transform: scale(80) translate(-450px, -5px);-webkit-transform: scale(80) translate(-450px, -5px);-moz-transform: scale(80) translate(-450px, -5px);-o-transform: scale(80) translate(-450px, -5px);box-sizing: border-box;">&nbsp; &nbsp; &nbsp; &nbsp;
<mpvoice class="js_editor_audio audio_iframe js_uneditable" data-pluginname="insertaudio" src="/cgi-bin/音频网址" isaac2="1" low_size="8.36" source_size="8.4" high_size="9.94" name="鸟叫" play_length="4000" voice_encode_fileid="这个也很重要" data-topic_id="" data-topic_name="" style="margin-top: 50px;"></mpvoice>

<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效果,欢迎联系野狼网络营销。