{{$datetime}}
How to make beep sound in JavaScript?

A beep sound is usually used for the notification alert in websites. There may be some other cases where you need to use a beep sound in your website.

You can find several real-life examples of this beep sound, such as in grocery stores, libraries, and many more places. This chapter will show you how to use a beep sound in a website using JavaScript programming language.

Following are the cases that we will discuss in this chapter:

  • Alert notification
  • Make a website more interactive

In this chapter, we will show you how to play a beep sound on a button click.

Where to use beep sound

Most of the time, you have noticed that a sound emits at the time of barcode scanning; it indicates to a successful scanning. This sound is a beep sound used by the programmer to send a signal to the user of successfully scanning.

Besides this, you have also heard this beep sound in videos several times to mute some part of the sound. There might be some other cases where this beep sound is used. It helps to make a site more interactive.

Implementation

To beep a sound on a button click using JavaScript, it does not require a lengthy code to implement. However, you need to embed the source of the beeping music using the HTML tab and provide the link of the audio in src.

We will take an example where on button click, we will call a user-defined function that will contain the code of beep sound.

Apart from that, we will use the play() function of JavaScript to play the music or sound provided in the code. Following is an example to play a beep sound.

Example 1

This is the most simple and shortest code to play a beep sound using the JavaScript programming language. In this example, we will use the beep music direct from the internet by providing its link in JavaScript code and play it on click.

Copy Code

Test it Now

Output

On executing this code on the web-browser, it will show you the output as shown in the below screenshot along with a button:

How to make beep sound in JavaScript

When you click on this Press Button, it will play a beep sound.

Example 2: using <audio> tab

In this example, we will use <audio> and <source> tabs to provide the id and src of music and embed them with JavaScript code. Here, we will take the beep sound from the internet by providing its link in JavaScript code.

Copy Code

Test it Now

Output

Execute the code on the web-browser; it will show you the output as shown in the below screenshot:

How to make beep sound in JavaScript

Here, click on the Click to beep button to beep a sound. Each time when you click this button, a function will trigger and a beep sound will play.

Play and Pause a sound using JavaScript

Other than the beep sound, you can use any other sound to play it on button click as well as you can stop playing that sound using the pause() function of JavaScript.

These play() and pause() function is used with the object of sound provided in the function by the programmer.

Example 3

Look at the example for this how it will be actually done:

Copy Code

Test it Now

Output

When you execute the above code on the web, you will get the output having two buttons. One for playing the sound and another to pause/stop the sound in between if you want.

How to make beep sound in JavaScript

Click on the Play Audio to play the track and the Pause Audio button to stop playing the sound between.

You will get a music button on the browser when you play the song.

How to make beep sound in JavaScript

Example 4: Using <embed> tag

The following example is another example to beep a sound on button click. In this example, we will use the <embed> tab of HTML to provide the link of beep sound in the src parameter from the internet.

Copy Code

Test it Now

Output

Similar to the previous example, this code will show you the output as shown in the below screenshot on executing the above code:

How to make beep sound in JavaScript

Here, click on the Click to beep button to beep a sound. Each time when you click this button, a function will trigger and a beep sound will play.

Note: we will advise you to use <audio> or <video> tag to embed a sound or video in your website.






Youtube For Videos Join Our Youtube Channel: Join Now

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA