Question

我正在尝试设置点击div播放音频（这是有效的），并更改另一个div的背景图像（不工作）。如果在播放期间再次点击按钮，音频也会暂停，并且背景图像需要跟上，因为它类似于暂停/播放视觉效果。

我在这里错了，它不起作用？

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8/>
    <title>Janice's Button</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #button {
            position: absolute;
            height: 100%;
            width: 100%;
            overflow: hidden;
            background-size: contain;
        }

        #clicker {
            z-index: 1000;
            position: absolute;
            left: 30%;
            top: 10%;
            width: 40%;
            border: 1px solid red;
            border-radius: 100%;
        }

        .unpressed {
            background:  url("ButtonImgUnpressed.jpg") no-repeat center top;
        }

        .pressed {
            background:  url("ButtonImgPressed.jpg") no-repeat center top;
        }


        #clicker:before{
            content: "";
            display: block;
            padding-top: 100%;  /* initial ratio of 1:1*/
        }

        .new
    </style>
</head>
<body>
    <div id="button" class="unpressed">
    </div>
    <div id="clicker" onClick="play()"></div>
    <audio id="audio" src="Rocky.mp3"></audio>
    <script>
        function play() {
            var audio = document.getElementById('audio');
            var button = document.getElementById('button')
            if (audio.paused) {
                audio.play();
                $('#button').removeClass('unpressed');
                $('#button').addClass('pressed');
            }else{
                audio.pause();
                audio.currentTime = 0
                $('#button').removeClass('pressed');
                $('#button').addClass('unpressed');
            }
        }
    </script>
</body>

非常感谢你！我确定这是一个愚蠢的错误/简单修复 - 我对js很新...

改变音频播放的div背景

0 个答案: