Swiper 슬라이더 관련 문의 채택완료
안녕하세요~ 작업중에 잘 안되는 부분이 있어 이렇게 문의드립니다.
1번 슬라이드에서 btnPlay1 클릭시 음악이 재생이되면서 4번 슬라이드까지 계속재생이되고 5번~6번 슬라이드에서는 음악이 자동으로 멈추게 작성했습니다.
문제는 6번 슬라이드에서 1번 슬라이드로 이동후에 btnPlay1 클릭하면 음악이 처음부터 재생이 되어야 하는데 음악이 나오지 않습니다.
6번 슬라이드 다음슬라이드가 1번 슬라이드입니다.
즉 1번 -> 2번 -> 3번 -> 4번 -> 5번 -> 6번 -> 1번
어떻게 해야 되는지 고수님들의 조언 부탁드리겠습니다.
작성된 코드는 다음과 같습니다.
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
// Audio 객체 설정 (동일한 오디오 파일을 사용)
const audio1 = new Audio("/song1.mp3");
// 버튼 취득
const btnPlay1 = document.getElementById("btnPlay1");
const btnPlay2 = document.getElementById("btnPlay2");
const btnPlay3 = document.getElementById("btnPlay3");
const btnPlay4 = document.getElementById("btnPlay4");
const btnPlay5 = document.getElementById("btnPlay5");
const btnPlay6 = document.getElementById("btnPlay6");
let isPlaying = false;
// 슬라이드 1p에서 음악 재생
btnPlay1.onclick = function () {
if (!isPlaying) {
playAudio(audio1);
isPlaying = true;
}
}
// 슬라이드 2p에서 음악 일시 정지
btnPlay2.onclick = function () {
if (isPlaying) {
pauseAudio(audio1);
isPlaying = false;
}
}
// 슬라이드 3p에서 음악 일시 정지
btnPlay3.onclick = function () {
if (isPlaying) {
pauseAudio(audio1);
isPlaying = false;
}
}
// 슬라이드 4p에서 음악 일시 정지
btnPlay4.onclick = function () {
if (isPlaying) {
pauseAudio(audio1);
isPlaying = false;
}
}
// 슬라이드 5p에서 음악 일시 정지
btnPlay5.onclick = function () {
if (isPlaying) {
pauseAudio(audio1);
isPlaying = false;
}
}
// 슬라이드 6p에서 음악 일시 정지
btnPlay6.onclick = function () {
if (!isPlaying) {
playAudio(audio1);
isPlaying = false;
}
}
// Swiper 슬라이더 초기화
var swiper = new Swiper('.swiper-container', {
// 슬라이드 설정
slidesPerView: 1,
spaceBetween: 0,
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
autoplay: false, // 자동 재생을 비활성화
});
// 슬라이드 변경 이벤트 감지
swiper.on('slideChange', function () {
var activeIndex = swiper.activeIndex;
// 슬라이드가 변경될 때 음악을 관리하도록 추가 코드 작성
if (activeIndex >= 5) {
if (isPlaying) {
pauseAudio(audio1);
isPlaying = false;
}
}
});
// 모든 오디오 일시 정지
function pauseAllAudios() {
audio1.pause();
isPlaying = false;
}
// 특정 음악 재생
function playAudio(audio) {
pauseAllAudios();
audio.currentTime = 0;
audio.play();
isPlaying = true;
}
// 음악 일시 정지
function pauseAudio(audio) {
audio.pause();
isPlaying = false;
}
답변 2개
무엇을 하려는지 정확히 파악하지 못하겠으나...
저 같으면 부여된 코드에서 사운드 부분은 아래처럼 짤 것 같습니다.
1
2
3
4
5
6
PLAY
currentSec = 0;
for (i = 1; i https://wittazzurri.com/editor/html_editor.php 에서 확인해 보세요.
참고로 myPlayer 의 음원을 바꿔주는 이벤트는 아래와 같습니다.
myPlayer.src = "음원주소";
----------
지금보니 아래처럼 코드를 줄이는게 더 좋겠네요.
1
2
3
4
5
6
PLAY
currentSec = 0;
playBtn.onclick = function() {
myPlayer.play();
myPlayer.currentTime = currentSec;
}
for (i = 1; i 답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
처음부터 다시 재생 하도록
// 슬라이드 변경 이벤트 감지
swiper.on('slideChange', function () {
var activeIndex = swiper.activeIndex;
// 슬라이드가 변경될 때 음악을 관리하도록 추가 코드 작성
if (activeIndex >= 5) {
if (isPlaying) {
pauseAudio(audio1);
isPlaying = false;
}
}
});
이것을 수정을 하시면 됩니다.
// 슬라이드 변경 이벤트 감지
swiper.on('slideChange', function () {
var activeIndex = swiper.activeIndex;
// 슬라이드가 변경될 때 음악을 관리하도록 추가 코드 작성
if (activeIndex === 0) {
if (!isPlaying) {
playAudio(audio1);
isPlaying = true;
}
} else if (isPlaying) {
pauseAudio(audio1);
isPlaying = false;
}
});
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인