Fatal编程技术网
  • javascript/
  • Javascript 更改音频播放上的div背景

Javascript 更改音频播放上的div背景

javascript jquery html audio

Javascript 更改音频播放上的div背景,javascript,jquery,html,audio,playback,Javascript,Jquery,Html,Audio,Playback,我试图得到一个设置，点击一个div播放音频（这是工作），并改变另一个div的背景图像（不工作）。如果在播放过程中再次单击按钮，音频也会暂停，背景图像需要保持不变，因为它类似于暂停/播放视频 我这里出了什么问题，它不工作了 <!DOCTYPE html> <html> <head> <meta charset=utf-8/> <title>Janice's Button</title>

我试图得到一个设置，点击一个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>


珍妮丝的纽扣
* {
保证金：0；
填充：0；
}
#钮扣{
位置：绝对位置；
身高：100%；
宽度：100%；
溢出：隐藏；
背景尺寸：包含；
}
#点击器{
z指数：1000；
位置：绝对位置；
左：30%；
排名前10%；
宽度：40%；
边框：1px纯红；
边界半径：100%；
}
.未经处理{
背景：url（“ButtonImgUnpressed.jpg”）无重复中心顶部；
}
.按{
背景：url（“ButtonImgPressed.jpg”）没有重复的中心顶部；
}
#点击者：之前{
内容：“；
显示：块；
填充顶部：100%；/*初始比例为1:1*/
}
.新的
函数播放（）{
var audio=document.getElementById（'audio'）；
var button=document.getElementById（'按钮'）
如果（音频暂停）{
音频播放（）；
$（“#按钮”）.removeClass（'unpressed'）；
$（“#按钮”）.addClass（“按下”）；
}否则{
audio.pause（）；
audio.currentTime=0
$（“#按钮”）.removeClass（'pressed'）；
$（“#按钮”）.addClass（'unpressed'）；
}
}

非常感谢你！我敢肯定这是一个愚蠢的错误/简单的修复-我对js非常陌生…

你把ButtonImpressed.jpg放在哪里了？你所说的背景图像需要保持的
是什么意思？当音频暂停并再次播放时，图像是否应该更改？我更改了图像和音频url并执行了您的代码。
更改另一个div的背景图像（不工作）
工作得很好。您可能需要检查用于
#按钮的图像url
。所有图像都与html文件位于同一文件夹中，因此是简单路径@谢谢你的尝试，你尝试了什么url路径更改？更新：尝试了web url，但仍然不起作用
。未按下{background:url（“http://cdn2-www.dogtime.com/assets/uploads/gallery/30-impossibly-cute-puppies/impossibly-cute-puppy-8.jpg）不重复中间位置；}。按{背景：url("http://cdn3-www.dogtime.com/assets/uploads/gallery/30-impossibly-cute-puppies/impossibly-cute-puppy-15.jpg）无重复中心顶部；}