swiper slide 시 음악 재생 제어 > 테크게시판

swiper slide 시 음악 재생 제어
 

<button onclick="PlayStop()" type="button" id="musicb">Music On/Off</button>

<audio id="audioID" autoplay loop>

    <source src="music.mp3" type="audio/mp3">

</audio>

<script>

    var myaudio = document.getElementById("audioID");

    var userStopped = false; // 사용자가 수동으로 멈췄는지 여부

    function PlayStop() {

        if (myaudio.paused) {

            myaudio.play();

            userStopped = false; // 수동 재생 시 false로 설정

        } else {

            myaudio.pause();

            userStopped = true; // 수동 정지 시 true로 설정

        }

    }

    // Swiper 슬라이드 초기화 및 이벤트

    var swiper = new Swiper('.swiper-container', {

        mode: 'horizontal',

        autoHeight: true,

        navigation: {

            nextEl: '.swiper-button-next',

            prevEl: '.swiper-button-prev',

        },

        on: {

            slideChange: function () {

                window.scrollTo(0, 0);

                // 사용자가 멈추지 않았고 음악이 정지 상태라면 재생

                if (!userStopped && myaudio.paused) {

                    myaudio.play();

                }

            }

        }

    });

</script>