Audio на странице GSAP/JS

Question

Помогите пожалуйста разобраться с кодом. Есть данный код, но он работает не корректно. Что нужно? Когда юзер кликнул на кнопку YES то запускается первое аудио, и как только юзер дошел до определенного места то первое аудио останавливается а второе производится. Сейчас выходит так что оно работает НО, если кликнуть на кнопку NO то первое аудио не работает а второе запускается по таймлайну. А наадо сделать так что когда нажал на кнопку NO то не воспроизводится не одно аудио. Спасибо заранее! Вот сам код.

     let popupAudio = document.createElement("div")
    popupAudio.classList.add("popup_audio")
    popupAudio.innerHTML = `
        <style>
            .popup_audio{
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.8);
                z-index: 9999;
                display: flex;
                align-items: center;
                justify-content: center;
            }


            .popup_audio .content{
                width: 100%;
                height: 80%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                max-widty:200px;
            }

            .popup_audio h2,
            .popup_audio .btn_audio_control{
                font-family: 'Montserrat';
                /*font-family: "Roboto";*/
                font-weight: 500;
                color: rgb(224, 223, 223);
                font-size: calc( 2vw + 2vh );
                margin: 0;
                line-height: 1.3em;
                text-align: center;
                // filter: url(#popupFilter);
                text-shadow: 0px 0px 10px #fff, 0px 0px 30px #fff, 0px 0px 20px #B24152;
            }
            .popup_audio .audio_control_wrapper{
                display: flex;
                flex-direction: row;
                max-widty:200px;
            }
            .popup_audio .btn_audio_control{
                margin: 10px 5vw;
                width: 50px;
                cursor: pointer;
            }

            .popup_audio img,
            .popup_audio svg{
                width: 100%;
                height: auto;
            }


        </style>
        <audio id="audioDemo" src="./assets/media/audio.mp3" loop></audio>
        <audio id="audioDemo2" src="./assets/media/audio2.mp3" loop></audio>
        <div class="content">
                <h2 class="animText">Play audio?</h2>
            <div class="audio_control_wrapper">
                <div class="btn_pause btn_audio_control btn_pause_popup">No</div>
                <div class="btn_play btn_audio_control btn_play_popup">Yes</div>
            </div>
        </div>
        `;
    document.body.appendChild(popupAudio);

    let siteAudio = document.createElement("div")
    siteAudio.classList.add("site_audio")
    siteAudio.innerHTML = `

        <style>
            .site_audio{
                position: fixed;
                bottom: 0;
                right: 0;
                visibility: hidden;
                cursor: pointer;
            }


            .site_audio .content{
                width: 150px;  
            }

            .site_audio img,
            .site_audio svg{
                width: 100%;
                height: auto;
            }


        </style>

        `;
    document.body.appendChild(siteAudio);



    let audioDemo = document.getElementById("audioDemo")
    function forBtnPlay() {
        if (audioDemo.currentTime == 0)
            audioDemo.load()

        audioDemo.loop = true;
        audioDemo.play()

        gsap.set(".btn_play,#btn_play", { autoAlpha: 0 })
        gsap.set(".btn_pause,#btn_pause", { autoAlpha: 1 })
        gsap.to(".popup_audio", { autoAlpha: 0 })
        gsap.to(".site_audio", { autoAlpha: 1 })
    }
    function forBtnPause() {
        audioDemo.pause()

        gsap.set(".btn_play,#btn_play", { autoAlpha: 1 })
        gsap.set(".btn_pause,#btn_pause", { autoAlpha: 0 })
        gsap.to(".popup_audio", { autoAlpha: 0 })
        gsap.to(".site_audio", { autoAlpha: 1 })
    }
    document.querySelectorAll(".btn_play").forEach(function (elem) {
        elem.addEventListener("click", function () {
            forBtnPlay()
        })
    })
    document.querySelectorAll(".btn_pause").forEach(function (elem) {
        elem.addEventListener("click", function () {
            forBtnPause()

        })
    })
    document.querySelectorAll("#btnClickPausePlay").forEach(function (elem) {
        elem.addEventListener("click", function () {
            if (audioDemo.paused) {
                forBtnPlay()
            } else {
                forBtnPause()
            }

        })
    })
   let audio = gsap.timeline({ defaults: { ease: "sine.inOut" } })
        .call(function () {
            audioDemo.pause()
        }, null, "<")
        .call(function () {
            audioDemo2.play()
        }, null, "<")

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js"></script>

БЛОГ НА HUSL

Audio на странице GSAP/JS

Ответы (0 шт):