[微信音訊播放器] html5 audio 製作的微信播放器

warpcgd發表於2016-07-30
音訊播放器HTML

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/初始化引數

Option Type Default Description
autoplay Boolean false 播放器是否在初始化時自動播放
src String — 如果audio標籤上沒設定src屬性，可在初始化時設定

API/執行方法

Method Parameters Description
play() — 播放方法
pause() — 暫停方法
changsrc() src,callback src:播放的地址;callback:回撥函式

相關文章