Develop Reference

How i can play audio in html?

<audio controls="controls" preload="auto">
<source src="src/audio/blog_audio/music_file.ogg" type="audio/ogg" />
Your browser does not support the audio element.
<source src="src/audio/blog_audio/music_file.mp3" type="audio/mp3" />
Your browser does not support the audio element.
<source src="src/audio/blog_audio/music_file.aac" type="audio/aac" />
Your browser does not support the audio element.
</audio>
I searched a lot here for a solution to the problem of playing the audio in the html5 file not working, and I did not find a solution to my problem, so I want to repeat the question in another form: the audio file works on the device or local host, but after uploading to the server it does not work.
I think the code is written correctly and I don't know how to solve it
I modified the mp3 audio file type to type="audio/mpeg"
This is the console error
https://imgur.com/a/GUS48j2
Please help to solve the problem
Thank you all

This is not from your code. The problem appear because you don't set the correct permissions for the file, this is why you get a 403 error and you can't play audio files on your page.
(I know my answer is a little bit blur, hope someone else could help you better ...)

Autoplay tag not working on chrome and firefox

So I have a music which only plays automatically on edge chromium. On firefox and chrome, it doesn't work. Any solution? THANKS
<audio id="music" autoplay loop style="display:none">
<source src="Music1.mp3" type="audio/mp3">
<source src="Msic1.ogg" type="audio/ogg">
</audio>

visit this
i think you should use iframe and audio tag as well for non-chrome browsers.

Try this, it worked for me. Just need to add the preload attribute.
Keep in mind the user must interact with the domain, so click something in any page of the site, once he interacts everything should work fine.
<audio id="music" autoplay loop preload>
<source src="Music1.mp3" type="audio/mp3">
<source src="Msic1.ogg" type="audio/ogg">
</audio>

Won't stop download music on localhost on the embed element of audio

I almost made it so I can have background music but when I go to my localhost it just downloads the music instead of playing it but in the full path one it plays it in the background so how can I prevent this from happening so it won't download in localhost?
Here is the code for it and the file name is actually "Sound.mp3" as well.
<embed src="Sound.mp3" autostart="true" loop="true"width="2" height="0" controls>
Any ideas of what do add to make it just play and not download?
I am actually working on a page that looks pretty cool and wanted to add background music cause it is actually an "under construction" page and wanted to make it look cooler with background music.

The prefered way of adding audio in Html5 is to use the audio element.You can achieve them by using the following codes,
This code will play the Sound.mp3 file with the controllers displayed for the user. So the users can control the background music. With the autoplay attribute, the music will start automatically.
<audio controls="controls" autoplay="autoplay"><source src="Sound.mp3" type="audio/mpeg" /></audio>
If you don't wanna show the controls, you can simply remove the controls attribute. As follows,
<audio autoplay="autoplay"><source src="Sound.mp3" type="audio/mpeg" /></audio>
But the song will autoplay because the autoplay attribute is added.
Unfortunately, not all browsers support mp3, so it's a good idea to include multiple versions of the file in different formats. As follows,
<audio autoplay="autoplay">
<source src="Sound.mp3" type="audio/mpeg" />
<source src="Sound.wav" type="audio/wav" />
<source src="Sound.ogg" type="audio/ogg" />
<p>This content is displayed by browsers that don't recognize the audio element.</p>
</audio>
Hope it helped. Good luck with your project. :)
More Attributes
loop - Automatically loop (keep playing over and over).

Use Tag to attach the attach the audio file to the html file.
If your audio file is Sound.mp3 then include it in <audio> tag.
<audio controls>
<source src="Sound.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
or use the below code
<audio src="Sound.mp3"> </audio>

Play Spotify song preview in audio element

I am trying to build a feature on my web application that pulls the preview url from Spotify's API, and play the preview when the user clicks on the audio controls. I am able to save the correct URL in the source, but the song does not play. I looked at the MDN Docs, but still could not get it to work. Here is a snippet of my code in JSX:
<div className="audio-container">
<audio controls="controls">
<source src={this.props.songs[2].href} type="audio"/>
</audio>
<p className="font-style">{this.props.songs[2].name}</p>
</div>
I do not receive any errors. Is there anything obvious I am missing? Thank you in advanced!

This should work if you use type="audio/mpeg"
Working example below:
<audio controls="controls">
<source src="https://p.scdn.co/mp3-preview/83090a4db6899eaca689ae35f69126dbe65d94c9?cid=null" type="audio/mpeg"/>
</audio>

For anybody who may find this useful later, I got the audio to work by removing the source tag and putting the preview url directly in the audio tag. Example:
<audio controls src="..."></audio>

Can't play audio in Mozilla

I have an audio tag inside body which contains an audio file.I want to play it when the body has finished loading.It plays in chrome but it fails to play in mozilla firefox.I tried to download the file and then play it with the local file but i got similar results.
Here's the audio tag declaration in the html:
<audio id="audio" src="http://jPlayer.org/audio/mp3/gbreggae-leadguitar.mp3"></audio>
And here is the JS used to play the audio after the body loads:
document.body.onload=function(){
document.getElementById("audio").play();
};

Use .ogg format, i had same problem and this thing solved my problem.
see below:--
Hope it helps.
<audio id="Green">
<source src="assets/audio/Green.mp3" </source>
<source src="assets/audio/Green.ogg">
</audio>