javascript - Changing div background on audio play -
i'm trying setup clicking on div plays audio (this working), , changes background image of div (not working). audio pauses if button clicked again during playing, , background image needs keep up, it's similar pause/play visual.
what've got wrong here isn't working?
<!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>
thank much! i'm sure it's silly mistake/simple fix - i'm new js...
Comments
Post a Comment