دکمه (buttons) ها ابزارک های بسیار مهمی در هر وبسایتی هستند و نمی توانید یک وبسایت را بدون دکمه (buttons) تصور کنید. دکمه ها وبسایت شما را قابل لمس تر برای مخاطب شما می کنند. افزودن افکت صدا به یک دکمه (buttons) می تواند وبسایت شما را جذابتر و منحصر به فرد‌تر از سایر وبسایت ها کند. لذا در این مقاله به شما آموزش می دهیم که چگونه با استفاده از افزونه المنتور یک افکت صدا را به یک دکمه (buttons) اضافه کنید.
نکته : برای خرید افزونه المنتور پرو اینجا کلیک کنید.
نحوه ی افزودن افکت صدا را روی دکمه (buttons) با استفاده از المنتور
ابتدا، یک صفحه با ویرایشگر المنتور را باز کنید جایی که می خواهید افکت صدایی را به دکمه (buttons) اضافه کنید. سپس ابزارک دکمه را اضافه کرده و با استفاده از ویژگی های ارائه شده توسط المنتور، آن را سفارشی کنید. المنتور امکانات و قابلیت های پیشرفته ای برای سفارشی سازی ابزارک دکمه (buttons) فراهم می کند.
بعد از ایجاد دکمه مورد نظر خود، باید افکت صدا را در کتابخانه رسانه های وبسایتتان بار گذاری کنید. برای این کار، فایل صدا را به فرمت WAV یا MP3 با استفاده از کتابخانه رسانه وردپرس بارگذاری کنید. برای این منظور، از داشبورد وردپرس خود به بخش رسانه > کتابخانه > افزودن جدید رفته و فایل انتخاب شده را که می خواهید به عنوان افکت صدای دکمه (buttons) استفاده کنید، بارگذاری کنید.
پس از بارگذاری فایل، بر روی فایل کلیک کنید و آدرس پیوند (URL) فایل را کپی کنید.
حالا مرحله بعد اضافه کردن یک کد (HTML) است تا صدا قابل اجرا شود. المنتور دارای ابزارک (HTML) پیش‌فرض خود است که می توانید از آن برای اضافه کردن کد (HTML) استفاده کنید. ابزارک (HTML)را جستجو کنید، آن را بکشید و پس از ابزارک دکمه (buttons) رها کنید. کد (HTML)زیر را به آن اضافه کنید:
<script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script>
<script>
$(document).ready(function() {
//Audio 1 Starts
var audio1 = new Audio(‘Sound-File-URL’)
$(“.button-class”).mousedown(function() {
audio1.load();
audio1.play();
});
//Audio 1 Ends
});
</script>
حتما آدرس پیوند (URL) فایل صدا (‘Sound-File-URL’) را با آدرس پیوند (URL) فایلی که بارگذاری کرده‌اید در این خط جایگزین کنید:
var audio1 = new Audio(‘Sound-File-URL’)
همچنین، نیاز است که یک کلاس برای دکمه (buttons) خود اضافه کنید. در اینجا ما از کلاس “bird-sound” به عنوان کلاس دکمه (buttons) استفاده می کنیم در این خط:
$(“.button-class”).mousedown(function()
لطفاً کلاس “button-class” را با کلاس دکمه (buttons) خود جایگزین کنید.
پس از اعمال تغییرات، کد نهایی باید به این صورت باشد:
<script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script>
<script>
$(document).ready(function() {
//Audio 1 Starts
var audio1 = new Audio(‘https://themeoo.com/test/wp-content/uploads/2022/04/mixkit-toy-whistler-bird-sound-18.wav’)
$(“.bird-sound”).mousedown(function() {
audio1.load();
audio1.play();
});
//Audio 1 Ends
});
</script>
حالا نیاز دارید کلاس دکمه را اضافه کنید تا دکمه (buttons) بتواند افکت صدا را ایجاد کند. بر روی دکمه (buttons) مورد نظر کلیک کنید و به بخش پیشرفته (Advanced) بروید. در اینجا فیلد کلاس های (CSS) را خواهید یافت. کلاس دکمه (buttons) (bird-sound) را در این فیلد اضافه کنید.
این عملیات باعث افزودن افکت صدا بر روی دکمه (buttons) مورد نظر شما می‌شود. اگر می خواهید افکت های صدا بیشتری اضافه کنید، باید همان فرایند را دنبال کنید و فقط متغیرها را تغییر دهید. و در نهایت صفحه را منتشر یا به‌روز رسانی کنید و به وبسایت خود بروید تا افکت صدا را در عمل را مشاهده کنید.
