آموزش جلوگیری از پخش همزمان چند موزیک در سایت

آموزش جلوگیری از پخش همزمان چند موزیک در سایت
قطعه کد جلوگیری از پخش همزمان آهنگ ها در تگ <audio> سایت
پخش یک آهنگ در پلیر HTML

اگر در یک صفحه از وب‌سایت خود بیش از یک پخش آنلاین آهنگ با تگ <audio> قرار دادید و از چند موزیک پلیر استفاده می‌کنید، پس با این مشکل مواجه شده‌اید که هنگام پخش یک موزیک، اگر کاربر روی موزیک دیگر کلیک کند، هر دو همزمان پخش می‌شوند و باعث ناهماهنگی و نارضایتی کاربر می‌شود.

در این آموزش، یاد می‌گیرید که چگونه با چند خط کد ساده JavaScript، فقط اجازه دهید یک موزیک در هر لحظه پخش شود و باقی متوقف شوند.

مشکل پخش چند فایل صوتی بصورت همزمان در سایت

در حالت پیش‌فرض، اگر چند <audio> روی صفحه داشته باشید و کاربر روی دکمه پخش (Play) هرکدام کلیک کند، تمام آن‌ها به صورت همزمان صدا پخش می‌کنند. این موضوع می‌تواند برای تجربه کاربری بسیار آزاردهنده باشد.

راه‌حل: توقف سایر پخش‌کننده‌ها هنگام پخش یک موزیک

می‌توان با استفاده از جاوااسکریپت (JavaScript)، هنگام شروع پخش یک موزیک، تمام موزیک‌های دیگر را متوقف کرد. به این صورت فقط یک فایل صوتی در هر لحظه پخش خواهد شد.

کد مورد نیاز

کد اسکریپت زیر را در فایل HTML خود قرار دهید:

// قطعه کد جلوگیری از پخش چند پلیر همزمان

document.addEventListener("DOMContentLoaded", function() {

document.addEventListener("play", function(e){

const audios = document.getElementsByTagName("audio");

for (let i = 0; i < audios.length; i++) {

if (audios[i] !== e.target) {

audios[i].pause();

}

}, true);

});

</script>

توضیح کد

این اسکریپت به رویداد play گوش می‌دهد.
وقتی یکی از پخش‌کننده‌های صوتی شروع به پخش می‌کند (e.target)، حلقه‌ای روی تمام پخش‌کننده‌ها اجرا می‌شود.
اگر آن پخش‌کننده متفاوت با آن چیزی باشد که کاربر فعال کرده، آن را متوقف می‌کند (pause()).

در نتیجه با این روش، کاربر فقط می‌تواند یک موزیک را در هر زمان بشنود. اگر موزیک جدیدی را اجرا کند، موزیک قبلی متوقف می‌شود. این کار نه‌تنها تجربه کاربری بهتری فراهم می‌کند، بلکه سایت شما را حرفه‌ای‌تر نشان می‌دهد.