كيفية اضافة صوت الصفير في JavaScript

عادةً ما يتم استخدام صوت صفير لتنبيه الإشعارات في مواقع الويب. قد تكون هناك بعض الحالات الأخرى التي تحتاج فيها إلى استخدام صوت صفير في موقع الويب الخاص بك,تعرف معنا كيفية اضافة صوت الصفير في JavaScript.

يمكنك العثور على العديد من الأمثلة الواقعية لصوت التنبيه هذا ، مثل متاجر البقالة والمكتبات والعديد من الأماكن الأخرى. سيوضح لك هذا الفصل كيفية استخدام صوت صفير في موقع ويب باستخدام لغة برمجة JavaScript 

فيما يلي الحالات التي سنناقشها في هذا المقال:

  • إشعار التنبيه
  • اجعل موقع الويب أكثر تفاعلية

في هذا المقال، سنوضح لك كيفية تشغيل صوت صفير بنقرة زر.

أين تستخدم صوت الصفير و كيفية اضافة صوت الصفير في JavaScript

في معظم الأوقات ، لاحظت أن صوتًا يصدر في وقت مسح الرمز الشريطي ؛ يشير إلى إجراء مسح ناجح. هذا الصوت عبارة عن صوت صفير يستخدمه المبرمج لإرسال إشارة إلى المستخدم لإجراء المسح بنجاح.

إلى جانب ذلك ، لقد سمعت أيضًا صوت التنبيه هذا في مقاطع الفيديو عدة مرات لكتم جزء من الصوت. قد تكون هناك بعض الحالات الأخرى التي يتم فيها استخدام صوت التنبيه هذا. يساعد في جعل الموقع أكثر تفاعلية.

التنفيذ

لإصدار صوت تنبيه عند النقر فوق الزر باستخدام JavaScript ، فإنه لا يتطلب رمزًا طويلاً لتنفيذه. ومع ذلك ، تحتاج إلى تضمين مصدر موسيقى التصفير باستخدام علامة التبويب HTML وتوفير ارتباط الصوت في src .

سنأخذ مثالاً حيث عند النقر على الزر ، سوف نستدعي وظيفة محددة من قبل المستخدم والتي ستحتوي على كود صوت الصفير.

بصرف النظر عن ذلك ، سنستخدم وظيفة play() في JavaScript لتشغيل الموسيقى أو الصوت المقدم في الكود. فيما يلي مثال لتشغيل صوت صفير.

مثال 1 :

  1. <html>
  2. <head>
  3.     <title> Beep sound document </title>
  4. </head>
  5. <body>
  6. <center>
  7.     <h2 style=“color:brown”> Simple example </h2>
  8.     <h4> Press the Button to beep a sound </h4>
  9.              <!– create a button to call the function to play a beep sound –>
  10.     <button onclick=“play()”> Press Button </button>
  11.     <script>
  12.             //JavaScript function to play the beep sound
  13.             function play() {
  14.         var beepsound = new Audio(
  15. ‘https://www.soundjay.com/button/sounds/beep-01a.mp3’);
  16.         beepsound.play();
  17.     }
  18.     </script>
  19. </center>
  20. </body>
  21. </html>

 

 

عند تنفيذ هذا الرمز على متصفح الويب ، سيُظهر لك الإخراج كما هو موضح في لقطة الشاشة أدناه مع زر:

مثال 2: استخدام علامة التبويب <audio>

في هذا المثال، سوف نستخدم <audio> و <source> علامات التبويب لتوفير معرف و SRC الموسيقى وتضمينها مع شفرة جافا سكريبتهنا ، سنأخذ صوت الصفير من الإنترنت من خلال توفير رابطه في كود JavaScript.

  1. <html>
  2. <head>
  3.     <title> Beep sound on button click </title>
  4. </head>
  5. <body>
  6.     <center>
  7.     <h2> Example: Beep a sound </h2>
  8.     <h4> Press the Button to beep a sound </h4>
  9.     <!– Use audio tab to provide an id to sound for further using it in JavaScript code –>
  10.     <audio id=“beepAudio” >
  11.     <!– Provide a link of beep sound from internet –>
  12.     <source src“https://www.soundjay.com/button/sounds/beep-01a.mp3”>
  13.     </audio>
  14.     <button onclick=“beepSound()”> Click to beep </button>
  15.     <script>
  16.            //user-defined function to play a beep sound
  17.     var audio = document.getElementById(‘ beepAudio’);
  18.     function beepSound () {
  19.         audio.play()
  20.     }
  21.     </script>
  22.     </center>
  23. </body>
  24. </html>

 

تنفيذ الكود على متصفح الويب ؛ سيظهر لك الإخراج كما هو موضح في لقطة الشاشة أدناه:

كيفية اضافة صوت الصفير في JavaScript

هنا ، انقر فوق الزر Click to beep لإصدار صوت تنبيه. في كل مرة تنقر فيها على هذا الزر ، سيتم تشغيل وظيفة وسيصدر صوت صفير.

قم بتشغيل صوت وإيقافه مؤقتًا باستخدام JavaScript

بخلاف صوت الصفير ، يمكنك استخدام أي صوت آخر لتشغيله عند النقر على الزر كما يمكنك إيقاف تشغيل هذا الصوت باستخدام وظيفة الإيقاف pause () في JavaScript.

يتم استخدام هاتين الوظيفتين play () و pause () مع كائن الصوت المقدم في الوظيفة بواسطة المبرمج.

مثال 3

انظر إلى مثال كيف سيتم ذلك بالفعل:

  1. <html>
  2. <body>
  3. <center>
  4. <h2 style=“color:brown”> Example: Play and Pause a sound </h2>
  5. <audio id=“myAudio”>
  6.   <!– provide the address of the sound to be played –>
  7.   <source src=“https://www.soundjay.com/free-music/sounds/barn-beat-01.mp3”>
  8.   Your browser does not support the audio element.
  9. </audio>
  10. <p><b> Click the buttons to play or pause the audio. </b></p>
  11.   <!– create a button to play the music –>
  12. <button onclick=“playAudio()” > Play Audio </button>
  13. <br><br>
  14.   <!– create a button to pause the music –>
  15. <button onclick=“pauseAudio()” > Pause Audio </button>
  16. </center>
  17. </body>
  18. <script>
  19. var sound = document.getElementById(“myAudio”);
  20. //function to play the audio
  21. function playAudio() {
  22.   sound.play();
  23. }
  24. //function to pause the audio
  25. function pauseAudio() {
  26.   sound.pause();
  27. }
  28. </script>
  29. </html>

 

عند تنفيذ الكود أعلاه على الويب ، ستحصل على الناتج به زرين. واحد لتشغيل الصوت والآخر لإيقاف / إيقاف الصوت بينهما إذا كنت تريد.

انقر فوق تشغيل الصوت لتشغيل المسار وزر إيقاف الصوت لإيقاف تشغيل الصوت بينهما.

ستحصل على زر موسيقى في المتصفح عند تشغيل الأغنية.

 

مثال 4: استخدام علامة <embed>

المثال التالي هو مثال آخر لإصدار صوت تنبيه عند النقر على الزر. في هذا المثال ، سنستخدم علامة التبويب <embed> في HTML لتوفير رابط صوت الصفير في المعلمة src من الإنترنت.

  1. <html>
  2. <head>
  3.     <title> Beep sound on button click </title>
  4. </head>
  5. <body>
  6.     <center>
  7.     <h2 style=“color:brown”> Example: Beep a sound </h2>
  8.     <h4> Press the Button to beep a sound </h4>
  9.     <!– Use embed to provide the link of beep sound from internet –>
  10.     <embed src=“https://www.soundjay.com/button/sounds/beep-01a.mp3” autostart=“false” width=“0” height=“0” id=“sound1”
  11. enablejavascript=“true”>
  12.     <button onclick=“playSound(‘sound1’)”> Click to beep </button>
  13.     <script>
  14.            //user-defined function to play a beep sound
  15.     function playSound(beepSound) {
  16.             //get the sound in JavaScript variable and play it
  17.         var audio = document.getElementById(beepSound);
  18.         audio.play() ;
  19.     }
  20.     </script>
  21.     </center>
  22. </body>

على غرار المثال السابق ، سيُظهر لك هذا الرمز الإخراج كما هو موضح في لقطة الشاشة أدناه عند تنفيذ الكود أعلاه:

 

هنا ، انقر فوق الزر Click to beep لإصدار صوت تنبيه. في كل مرة تنقر فيها على هذا الزر ، سيتم تشغيل وظيفة وسيصدر صوت صفير.

 

ملاحظة: ننصحك باستخدام علامة <audio> أو <video> لتضمين صوت أو فيديو في موقع الويب الخاص بك.

 

اظهر المزيد
زر الذهاب إلى الأعلى

أنت تستخدم إضافة Adblock

الاعلانات هي مصدرنا الوحيد لدفع التكلفة التشغيلية لهذا المشروع الريادي يرجى الغاء تفعيل حاجب الأعلانات