Click a button to play sound on Javascript

Question

I would like to make a button play a B-flat scale when clicked. What am I doing wrong?

<!DOCTYPE html>
<html>
<head>
<script>
function PlaySound() {
    alert("hello");
  var bflat = new audio();
  bflat.src = "bflat.mp3";
  document.getElementById(bflat);
  bflat.Play();
}
</script>
</head>
<body>
<audio id="bflat"> </audio>
<button onclick="PlaySound"> B Flat </button>
</body>
</html>

onclick="PlaySound" won't work... that is effectively just a reference to the function. To call a function you need to use () so change it to onclick="PlaySound()" — freefaller
– freefaller, Commented Oct 2, 2015 at 18:28

Abhishake Gupta · Accepted Answer · 2016-09-07 10:42:39Z

5

Use below code, if the melodies are at some other location. In Javascript, provide below:

<script>
    function PlaySound(melody) {
        alert("On Press of "+melody);
        var path = "path\\to\\melody\\"
        var snd = new Audio(path + melody + ".mp3");
        snd.play();
    }
</script>

In HTML body: you can insert

<button onclick="PlaySound('melody1')"> button1</button>
<button onclick="PlaySound('melody2')"> button2</button>

answered Sep 7, 2016 at 10:42

Abhishake Gupta

3,0901 gold badge29 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

RhinoDevel · Accepted Answer · 2015-10-02 18:21:10Z

4

Keep it simple (until it works) and try this:

<audio id="bflat" src="bflat.mp3"></audio>
<button onclick="document.getElementById('bflat').play()">Play!</button>

Found it at MDN

answered Oct 2, 2015 at 18:21

RhinoDevel

7121 gold badge12 silver badges25 bronze badges

3 Comments

Livy Golini Over a year ago

does it matter where the mp3 file is held?

Touffy Over a year ago

@LivyGolini It matters that you don't create a new <audio> element when the button is clicked, because the newly created element may not be able to start playback immediately (especially the first time).

RhinoDevel Over a year ago

@LivyGolini: The example in my answer should work, if the MP3 file resides in the same folder as the HTML file. Please test this locally (putting MP3 and HTML file in a directory on your computer and open the HTML file with a browser) before uploading it to a server to avoid other pitfalls. Use the developer output to get more infos about maybe occurring errors (e.g. with Firefox: Take a look at the Tools -> Web Developer menu).

Patrik Fröhler · Accepted Answer · 2015-10-02 18:42:48Z

2

This works:

<!DOCTYPE html>
<html>
<head>
<script>
var bflat = new Audio();
bflat.src = "bflat.mp3";
function PlaySound() {
    bflat.play();
}
</script>
</head>
<body>
<audio id="bflat"> </audio>
<button onclick="PlaySound()"> B Flat </button>
</body>
</html>

edited Oct 2, 2015 at 18:42

answered Oct 2, 2015 at 18:26

Patrik Fröhler

1,3011 gold badge12 silver badges39 bronze badges

Comments

victorfern · Accepted Answer · 2015-10-02 18:29:36Z

0

This is very simple, try to call PlaySound function using this HTML

<button onclick="PlaySound()"> B Flat </button>

Keep it simple!

answered Oct 2, 2015 at 18:29

victorfern

464 bronze badges

Comments

Bart · Accepted Answer · 2018-03-05 09:25:16Z

0

<!DOCTYPE html>
<html>
<body>

<audio id="myAudio">
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<p>Click the buttons to play or pause the audio.</p>

<button onclick="playAudio()" type="button">Play Audio</button>
<button onclick="pauseAudio()" type="button">Pause Audio</button> 

<script>
var x = document.getElementById("myAudio"); 

function playAudio() { 
    x.play(); 
} 

function pauseAudio() { 
    x.pause(); 
} 
</script>

</body>
</html>

answered Mar 5, 2018 at 9:25

Bart

3254 silver badges15 bronze badges

Collectives™ on Stack Overflow

Click a button to play sound on Javascript

5 Answers 5

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related