音频audio,加层父级 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    body {
        background: #2b2938;
    }

    .cn_btn_audio {
        margin: 90px auto;
        width: 186px;
        height: 186px;
        background: url(http://img.d1xz.net/d/2018/07/5b56749f0817d.png) no-repeat;
        background-size: cover;
    }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
    <div class="nc_info">
        <div class="cn_btn_audio J_btnAudio" data-id="1">
            <audio class="J_mp3Btn">
                <source src="http://www.ytmp3.cn/down/49366.mp3" type="audio/mpeg" />
            </audio>
        </div>
    </div>
    <div class="nc_info">
        <div class="cn_btn_audio J_btnAudio" data-id="2">
            <audio class="J_mp3Btn">
                <source src="http://www.ytmp3.cn/down/49366.mp3" type="audio/mpeg" />
            </audio>
        </div>
    </div>
    <div class="nc_info">
        <div class="cn_btn_audio J_btnAudio" data-id="3">
            <audio class="J_mp3Btn">
                <source src="http://www.ytmp3.cn/down/49366.mp3" type="audio/mpeg" />
            </audio>
        </div>
    </div>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.0/jquery.min.js"></script>
    <script type="text/javascript">
    $(function() {
        //播放完毕
        $('.J_mp3Btn').on('ended', function() {
            console.log("音频已播放完成");
            $('.J_btnAudio').css({
                'background': 'url(http://img.d1xz.net/d/2018/07/5b56749f0817d.png)',
                'background-size': 'cover'
            });
        })


        $('.J_btnAudio').click(function() {
            var cindex = $(this).data('id'); //定义个属性值
            console.log(cindex);
            $('.J_btnAudio').each(function(i) {
                var z=$(this).data('id');
                console.log('****'+z);
                var audio = $(this).children('.J_mp3Btn')[0];
                if (z == cindex) {  //判断属性值等于当前的值
                    if (audio.paused) { //如果当前是暂停状态
                        $(this).css({
                            'background': 'url(http://img.d1xz.net/d/2018/07/5b567509be452.png)',
                            'background-size': 'cover'
                        });
                        audio.play();
                    } else { //当前是播放状态
                        $(this).css({
                            'background': 'url(http://img.d1xz.net/d/2018/07/5b56749f0817d.png)',
                            'background-size': 'cover'
                        });
                        audio.pause();
                    }
                } else {
                    if (!audio.paused) { //当前是播放状态
                        $(this).css({
                            'background': 'url(http://img.d1xz.net/d/2018/07/5b56749f0817d.png)',
                            'background-size': 'cover'
                        });
                        audio.pause();
                    }
                }

            });

        });
    })
    </script>
</body>

</html>

 

posted @ 2018-07-25 10:47  前端HL  阅读(171)  评论(0)  编辑  收藏  举报