Play Demo

Without BH70

With BH70

`)

mySwiper = new Swiper(“.headset-audio-swiper”, {
allowTouchMove: false,
loop: true,
preventClicks : false,
slidesPerView: ‘auto’,
centeredSlides: true,
spaceBetween: 30,
navigation: {
nextEl: “.headset-audio-swiper-next”,
prevEl: “.headset-audio-swiper-prev”,
},
observer:true,
on:{
slideChange: function(){
if (oldIndex === mySwiper.realIndex || !(mySwiper.realIndex || mySwiper.realIndex === 0)) {
return
}
oldIndex = mySwiper.realIndex;

var r = $(‘.headset-audio-content’)

r.find(‘.aud_dispose’).prop(‘src’, headsetAudio[mySwiper.realIndex].audDispose)
r.find(‘.aud_dispose’)[0].load()
r.find(‘.aud_dispose_no’).prop(‘src’, headsetAudio[mySwiper.realIndex].audNoDispose)
r.find(‘.aud_dispose_no’)[0].load()
r.find(‘.pause_img’).css({ display: ‘none’ })
r.find(‘.play_img’).css({ display: ‘block’ })
r.find(“.hint_text”).text(“Play Demo”);
r.find(“.btn_play”).removeClass(“on”)
},
},
})
let loadedImages = 0
const images = $(‘.headset-audio-content .swiper-wrapper img’)
images.each(function() {
if (this.complete) { // 如果图片已经加载完成
loadedImages++; // 增加已加载图片的数量
} else {
$(this).on(‘load’, function() { // 如果图片尚未加载完成，则在加载完成时执行此函数
loadedImages++; // 增加已加载图片的数量
if (loadedImages === images.length) { // 如果所有图片都已加载完成

// 执行你的代码逻辑，比如显示图片容器
mySwiper.activeIndex = 1
}
});
}

})

}
initSwiper()
window.addEventListener(‘resize’,()=> initSwiper(),false)
var r = $(‘.headset-audio-content’)
var headsetAudio = [
{
audDispose: ‘/website-service/download/windWithBH70’,
audNoDispose: ‘/website-service/download/windWithoutBH70’,
},
{
audDispose: ‘/website-service/download/officeWithBH70’,
audNoDispose: ‘/website-service/download/officeWithoutBH70’,
},
{
audDispose: ‘/website-service/download/homeWithBH70’,
audNoDispose: ‘/website-service/download/homeWithoutBH70’,
}
] function initAudio () {
r.find(‘.aud_dispose’).prop(‘src’, headsetAudio[1].audDispose)
r.find(‘.aud_dispose’)[0].load()
r.find(‘.aud_dispose_no’).prop(‘src’, headsetAudio[1].audNoDispose)
r.find(‘.aud_dispose_no’)[0].load()

// 切换是否降噪
r.find(“.btn_cut”).on(“click”, function () {
let markF = $(this).parents(“.headset-audio-content”);
if (!$(this).hasClass(“on”)) {
$(this).addClass(“on”);
markF.find(“.aud_dispose”).prop(“muted”, true);
markF.find(“.aud_dispose_no”).prop(“muted”, false);
} else {
$(this).removeClass(“on”);
markF.find(“.aud_dispose”).prop(“muted”, false);
markF.find(“.aud_dispose_no”).prop(“muted”, true);
}
});

//播放
r.find(“.btn_play”).on(“click”, function () {
let markF = $(this).parents(“.headset-audio-content”),
numX = 0;
if (!$(this).hasClass(“on”)) {
if (!markF.find(“.btn_cut”).hasClass(“on”)) {
numX = 1;
markF.find(“.aud_dispose”).prop(“muted”, false);
markF.find(“.aud_dispose_no”).prop(“muted”, true);
} else {
markF.find(“.aud_dispose”).prop(“muted”, true);
markF.find(“.aud_dispose_no”).prop(“muted”, false);
}
$(“.aud_dispose”).each(function () {
$(this)[0].pause();
});
$(“.aud_dispose_no”).each(function () {
$(this)[0].pause();
});
$(this).addClass(“on”);
markF.find(‘.pause_img’).css({ display: ‘block’ })
markF.find(‘.play_img’).css({ display: ‘none’ })
$(this).siblings(“.hint_text”).text(“Pause Demo”)
markF.find(“.aud_dispose”)[0].play();
markF.find(“.aud_dispose_no”)[0].play();
var audioTimer = setInterval(function () {
var currentTime = markF.find(“.aud_dispose”)[0].currentTime;
setTimeShow(currentTime);
}, 1000);
let audio = markF.find(“.aud_dispose”)[0];
// 设置播放时间
function setTimeShow(t) {
t = Math.floor(t);
console.log((t / Math.floor(audio.duration)).toFixed(4), Math.floor(audio.duration))
var duration = (t / Math.floor(audio.duration)).toFixed(4) * 100;
markF.find(“.timeline”).css({ width: duration >= 100 ? ‘100%’ : duration + “%” });

if (duration >= 100 ) {
clearInterval(audioTimer)
r.find(‘.pause_img’).css({ display: ‘none’ })
r.find(‘.play_img’).css({ display: ‘block’ })
r.find(“.hint_text”).text(“Play Demo”);
r.find(“.btn_play”).removeClass(“on”)
r.find(“.timeline”).css({ width: “0%” });
}
}
} else {
$(this).removeClass(“on”);
$(this).siblings(“.hint_text”).text(“Play Demo”);
markF.find(“.aud_dispose”)[0].pause();
markF.find(“.aud_dispose_no”)[0].pause();
markF.find(‘.pause_img’).css({ display: ‘none’ })
markF.find(‘.play_img’).css({ display: ‘block’ })
}
});
}
initAudio()
})