微信音乐播放器代码

使用教程：
需要引入jquery.min.js

一、引入以下js和ccs

<script type="text/javascript" src="weixinaudio.js"></script>  
<link rel='stylesheet' href='weixin.css' />

二、需要显示的地方加入以下代码

<p class="weixinAudio">
            <div><audio src="" id="media" width="1" height="1" preload></audio></div>
            <span id="audio_area" class="db audio_area">
                <span class="audio_wrp db">
                    <span class="audio_play_area">
                        <i class="icon_audiodefault"><img src="images/shengyin.png" alt=""></i>
                        <i class="icon_audioplaying"><img src="images/shengyin.gif" alt=""></i>
                    </span>
                    <span id="audio_length" class="audio_length tips_global"></span>
                    <span id="curent_time">0:00</span>
                    <span class="db audio_info_area">
                        <strong class="db audio_title">浮夸</strong>
                    </span>
                    <span id="int_c"></span>
                    <span class="progress_bar_box" style="width: 345px;">
                    <span id="audio_progress" class="progress_bar" style="width: 0%;"></span>
            </span>
                </span>
            </span>

        </p>

    <script type="text/javascript">
        $('.weixinAudio').weixinAudio({
            autoplay:true,
            src:'fukua.mp3',
        });
    </script>
    <script>
        var a=0;
        $(".audio_play_area").click(function () {
                a++;
            if(a%2!=0){
                $(".icon_audiodefault").css({"display":"none"});
                $(".icon_audioplaying").css({"display":"block"});
                console.log(a);
            }
            if(a%2==0){
                console.log(a);
                $(".icon_audiodefault").css({"display":"block"});
                $(".icon_audioplaying").css({"display":"none"});
                }

        })
    </script>

weixin.zip

作者：https://hujinyuan.cn/148.html