[微信音频播放器] html5 audio 制造的微信播放器

2024年4月9日 232次阅读 来源: warpcgd

weixinAudio.js

一个简朴的微信款式播放器

播放器DOM及CSS是微信里内置的音频播放器的款式，从新创建了掌握层js，轻易在在民众号，APP等场景运用。

例子

demo

地点

github

怎样运用

经由过程以下demo来完成

HTML模板

<p class="weixinAudo">
    <audio src="../sound/sound.mp3" id="media" width="1" height="1" preload></audio>
    <span id="audio_area" class="db audio_area">
        <span class="audio_wrp db">
            <span class="audio_play_area">
                <i class="icon_audio_default"></i>
                <i class="icon_audio_playing"></i>
            </span>
            <span id="audio_length" class="audio_length tips_global">3:07</span>
            <span class="db audio_info_area">
                <strong class="db audio_title">题目</strong>
                <span class="audio_source tips_global">泉源</span>
            </span>
            <span id="audio_progress" class="progress_bar" style="width: 0%;"></span>
         </span>
    </span>
</p>

Js挪用

//你须要先引入一个jQuery
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/weixinAudip.js"></script>
<script>
   $('.weixinAudo').weixinAudio(options);
</script>

options/初始化参数

OptionTypeDefaultDescription
autoplayBooleanfalse播放器是不是在初始化时自动播放
srcString—假如audio标签上没设定src属性，可在初始化时设置

API/实行要领

MethodParametersDescription
play()—播放要领
pause()—停息要领
changsrc()src,callback src:播放的地点;callback:回调函数
    原文作者：warpcgd
    原文地址: https://segmentfault.com/a/1190000006121846
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞