Home theatre creating using javascript

 

Source code :


<!DOCTYPE html>
<html>

<head>
    <title>
        Home Theatre
    </title>
    <style>
        .container {
            position: relative;
            height: 90vh;
        }
       
        .speaker,
        .wave {
            width: 100px;
            height: 100px;
        }
       
        .leftside {
            position: absolute;
            left: 0px;
            top: 150px;
        }
       
        .rightside {
            position: absolute;
            right: 0px;
            top: 150px;
        }
       
        .downside {
            position: absolute;
            bottom: 0px;
            left: 500px;
        }
       
        .upside {
            position: absolute;
            left: 500px;
            top: 0px;
        }
       
        .box>.wave {
            opacity: 0;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box upside">
            <img class="speaker" id="up" src="data:image/jpeg;base64,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">
            <img class="wave" id="up-wave" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSOaJYBFoeTzoKJuWDKR1SSsqTLz5kGJcuRCA&usqp=CAU">
        </div>
        <div class="box leftside">
            <img class="speaker" id="left" src="data:image/jpeg;base64,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">
            <img class="wave" id="left-wave" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSOaJYBFoeTzoKJuWDKR1SSsqTLz5kGJcuRCA&usqp=CAU">

        </div>
        <div class="box rightside ">
            <img class="speaker " id="right " src="data:image/jpeg;base64,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">
            <img class=" wave " id="right-wave " src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSOaJYBFoeTzoKJuWDKR1SSsqTLz5kGJcuRCA&usqp=CAU ">

        </div>
        <div class="box downside ">
            <img class="speaker " id="down " src="data:image/jpeg;base64,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">
            <img class=" wave " id="down-wave " src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSOaJYBFoeTzoKJuWDKR1SSsqTLz5kGJcuRCA&usqp=CAU ">
        </div>
    </div>
    <script>
        var i = 0;
        var old = 0;
        var audio = new Audio("C:\\Users\\sugan\\Downloads\\mixkit-sci-fi-click-900.wav");
        var wave = document.getElementsByClassName("box");

        function ini(i) {
            wave[i].children[1].style.opacity = 0;
        }
        setInterval(function() {
            i = Math.floor(Math.random() * 4);
            wave[i].children[1].style.opacity = 1;
            audio.play();
            if (i != old) {
                old = i;
                ini(old);
            }
        }, 2000);
    </script>
</body>

</html>












Post a Comment

Post a Comment (0)

Previous Post Next Post