Background music HTML - How do I make it play instantaneously when page is loaded? - html

So I've written this piece of music that I would like as background music when browsing my webpage. You should be able to pause it, but I'd like it to play up instantaneously to get some good vibes!
This is my code so far:
<audio controls>
<source src="music.mp3" type="audio/ogg">
</audio>
I get it to play, but as I said - I want it to start play automatically when you load the page!
Thanks in advance!

Add the attribute autoplay
<audio controls autoplay>
<source src="music.mp3" type="audio/ogg">
</audio>
EDIT And to loop it:
<audio controls autoplay loop>
<source src="music.mp3" type="audio/ogg">
</audio>

Related

how to remove black background of audio player in html

I embedded an audio on my web page with <embed> but there is a black background behind the player.
Why does this happen and how should I remove it? Or is there any other better way to embed the audio?
[<embed src="../audio/introduction.mp3" autostart="true" loop="true" bgcolor="" >]
This is how the audio player looks like:
https://i.stack.imgur.com/Ktr1P.png
If you are using HTML5 then <audio> tag is the best choice for you:
https://www.w3schools.com/tags/tag_audio.asp
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
We can use HTML5 Audio tag for this purpose instead of embed
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

I'm trying to add audio to my html.

I'm trying to add audio to a webpage. I don't know why it isn't working.`I am doing a sound samples webpage. I can see the audio bar on the screen but the audio doesn't play. I't says that it's 0:00 long so maybe its not finding the audio. The path to the audio is C:\Users\matth\Desktop\Website\samples. I've tried it on chrome and firefox.
<div class="soundsamples">
<audio controls>
<source src="sound sample 1.mp3" type="audio/mpeg">
</audio>
<audio controls>
<source src="sound sample 2.mp3" type="audio/mpeg">
</audio>
<audio controls>
<source src="sound sample 3.mp3" type="audio/mpeg">
</audio>
<audio controls>
<source src="sound sample 4.mp3" type="audio/mpeg">
</audio>
<audio controls>
<source src="sound sample 5.mp3" type="audio/mpeg">
</audio>
<audio controls>
<source src="sound sample 6.mp3" type="audio/mpeg">
</audio>
<audio controls>
<source src="sound sample 7.mp3" type="audio/mpeg">
</audio>
<audio controls>
<source src="sound sample 8.mp3" type="audio/mpeg">
</audio>
</div>
The problem with this script is that the html page cannot find the audio and therefore play it.
From your example given above, you say your audio files are located at C:\Users\matth\Desktop\Website\samples.
In order for your audio to play the html page would have to be located in the same folder as the audio itself (IE C:\Users\matth\Desktop\Website\samples) which it is not.
From your comment you say that your html file is located at C:\Users\matth\Desktop\Website so you must either change the location of the audio files or give the correct file path.
Changing the file path is easy. To access a sub-folder you would just use /SubfolderName/ and to go up a dictionary you would use ../.
So knowing that the location of the audio is C:\Users\matth\Desktop\Website\samples we would just need to go in the sub-folder samples. This can be done easily by just adding it to you existing file path. In your first example the working path would be:
.
You can see this page for more details on changing file paths.
W3schools also do a marvelous tutorial on the subject as well.
Hope I was helpful.

HTML audio won't play file but download works

I feel like I have tried everything.
I have the following:
<audio controls ng-src="https://myS3routeToFile" class="w-full"></audio>
I have also tried the following variation:
<audio controls>
<source src="https://myS3routeToFile" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
I am able to press download it does download the file correctly.
What am I doing wrong?
Use the second version and add an ogg version of your audio file to make it complatble with all browsers.
<audio controls>
<source src="your_file.ogg" type="audio/ogg">
<source src="your_file.mp3" type="audio/mpeg">
</audio>

Automatically play audio in HTML 5

I have music I want to play and loop on the web page startup. Here's my code:
<audio autoplay="autoplay" loop controls="controls">
<source src="music.mp3" />
</audio>
The question that is a "duplicate" does not suit my needs and does not work for me.
I found out what to do using a div with the visibility to hidden
<div style="visibility:hidden">
<audio controls autoplay loop>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>

Can video tag be used in HTML 5 to run mp3 audio file?

I am using audio tag to play mp3 file in HTML 5 , rather i want to use video tag for HTML 5.
Is that possible and how can i do that?
<audio class="audio" id="c_step_1_audio" controls preload="none" style="display: none">
<source src="test.mp3" type="audio/mpeg">
</audio>
I want to do as follows
<video class="audio" id="c_step_1_audio" controls preload="none" style="display: none">
<source src="test.mp3" type="audio/mpeg">
</video>
This is neither recommended nor approved in any browser or W3C. But try it, might work some where if you are lucky.
<video width="320" height="240" controls>
<source src="test.mp3" type="audio/mpeg">
Your browser does not support audio in video tag.
</video>