多个音频audio2 

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

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

        .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="btn-audio">
        <audio class="mp3Btn">
            <source src="http://www.ytmp3.cn/down/49366.mp3" type="audio/mpeg" />
        </audio>
    </div>
    <div class="btn-audio">
        <audio class="mp3Btn" controls="controls">
            <source src="http://www.ytmp3.cn/down/49366.mp3?v=15" type="audio/mpeg" />
        </audio>
    </div>
    <div class="btn-audio">
        <audio class="mp3Btn" controls="controls">
            <source src="http://www.ytmp3.cn/down/49366.mp3?v=15" type="audio/mpeg" />
        </audio>
    </div>
    <div class="btn-audio">
        <audio class="mp3Btn" controls="controls">
            <source src="http://www.ytmp3.cn/down/49366.mp3?v=15" type="audio/mpeg" />
        </audio>
    </div>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //播放完毕
            $('#mp3Btn').on('ended', function () {
                console.log("音频已播放完成");
                $('.btn-audio').css({
                    'background': 'url(http://img.d1xz.net/d/2018/07/5b56749f0817d.png)',
                    'background-size': 'cover'
                });
            })


            $('.btn-audio').click(function () {
                var cindex = $(this).index();

                $('.btn-audio').each(function (i) {
                    // var audio=item.children('.mp3Btn')[0];
                    var audio = $(this).children('.mp3Btn')[0];
                    if (i == 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-24 17:20  前端HL  阅读(463)  评论(0)    收藏  举报