I've just started learning how to use this; unsure on how linking audio files into the script works. All I'm trying to do is have a small audio player.
<audio controls width="100" height="100">
<source src="somethin.mp3" type="audio/mp3">
<!-- Fallback for older browsers -->
Your browser doesn't support html5 audio
</audio>
have you tried checking w3 schools out?
https://www.w3schools.com/html/html5_audio.asp
There are ways to check for browsers in jQuery too. Make sure to check them out.
It all depends on the file location. For your script above you would put your somethin.mp3 in the same location as you html file. If you want to put it in a sub folder (say your folder containing the .mp3 was called audio) it would be <source src="audio/somethin.mp3" type="audio/mp3">. If it was in a second sub folder (say the second was called html_sound) then it would be <source src="audio/html_sound/somethin.mp3" type="audio/mp3">. If you want to go one dictionary up you would use <source src="../somethin.mp3" type="audio/mp3">. Two dictionaries up would be <source src="../../somethin.mp3" type="audio/mp3"> and so on.
Just copy the dictionary name to go into a folder and use ../ to go up one folder.
also your code does not end with </audio> tag (It MUST) and it's type="audio/mpeg" not type="audio/mp3".
Best test the script in Chrome, Edge or Internet Explorer (if you have Windows) are OK too but do not test it in Firefox or Opera as it supports .ogg files (I know W3schools says it does but all you need is an outdated browser and it will not work).
You might want to check this out.
If you have done links or images they are exactly the same.
Related
I need to use a .wav format audio in my HTML code. I used the following code and test it on chrome.
<audio controls controlsList="nodownload"><source src="sample.wav" type="audio/wav"></audio>
But it's showing an empty audio file on my webpage over and over again and my chrome browser telling me to download that .wav file. How to solve that problem?
Your snippet works well, you can test it here (I made a copy and paste from your post)
http://87.106.127.248/wav.html
Use only well known combinations of sample rate/bit depth, i.e. 44.100/16 bit with browsers
For streaming purposes on the web (like in an audio tag) you should create copies of your audio file in .mp3 and .ogg format and use these for your website.
Then a typical audio tag which could be handled by practically all modern browsers would look like this:
<audio>
<source src="path/to/yourfile.ogg" type="audio/ogg">
<source src="path/to/yourfile.mp3" type="audio/mpeg">
</audio>
I have a .wav file that is being continuously appended to. Is it possible to play this file using the HTML <audio> element? Here is my current approach:
<audio controls="controls" autoplay="autoplay" preload>
<source src="stream.wav/" type="audio/wav">
</audio>
If I refresh the page, it reflects the new audio available in the file, but it does not render as a streaming player. It seems like it should be playing in "live" mode according to this question.
I would also be open to using some kind of framework or JavaScript to accomplish this if that would be best practice, but I haven't found anything yet.
Files cant end in /
src="stream.wav/"
Should be src="stream.wav"
In order to stream live audio and video, you will need to run specific streaming software on your server or use third-party services.
https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_video#Server-side_Streaming_Technologies
That section of that page lists a few popular options for doing this.
I am trying to embed a html5 audio tag in my web page here is the code.
<audio controls>
<source src="http://thearabiclab.com/wp-content/uploads/2015/07/arabic-word-meeting.ogg" type="audio/ogg">
<source src="http://thearabiclab.com/wp-content/uploads/2015/07/arabic-word-meeting.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
path of both the files mp3 and ogg are correct, the issue is when the page loads first time it will display the player correctly but suddenly it will transform into something like the image below.
https://www.dropbox.com/s/xkjrql4vzr3pkrh/Screenshot%202015-07-05%2015.12.56.png?dl=0
Please help to resolve this issue.
thanks
You mentioned code working fine for me..
What you can do to debug it first make a separate HTML file copy and paste the code, check if it working or not. It's looking sure... some conflict with your Js or jQuery.
I have a simple html 5 audio tag (below) on a page in a password protected directory.
The directory is protected by HTTP Basic authentication.
It was working fine on iOS7, on Safari. Now when I click on the Play button, nothing happens.
On other directories that are not password protected, it still works fine.
<audio controls>
<source src="audio/01-10r.mp3" type="audio/mp3">
<source src="audio/01-10r.ogg" type="audio/ogg">
<source src="audio/01-10r.wav" type="audio/wav">
</audio>
OK, just a hunch here but if its working for you in other directories I would say check your source from which your loading the file. If it's working in one directory and not the other I'd say its not loading the file correctly using the "src" source you have set. But if you want to post more details about your structure I don't mind looking over it further.
According to W3 here's the browsers it supports
I have used the following html audio tags to plays different files in different sound formats
<audio controls="player_1">
<source src="D:\HND grrrrr\Year_2\RoyWebsite\Sounds\WAV\home_page_readout.wav" type="audio/wav"/>
<source src="D:\HND grrrrr\Year_2\RoyWebsite\Sounds\MP3\home_page_readout.mp3" type="audio/mp3"/>
<source src="D:\HND grrrrr\Year_2\RoyWebsite\Sounds\ogg\home_page_readout.ogg" type="audio/ogg"/>
</audio>
Now the right sound format plays in IE and Chrome, however when i open the page up in Opera or Safari, the sound player appaears but the play button does not work when it is pressed, as if the file cannot be found or something ?
Oh and I don't know what the type/ part is so separated on the first line
Try using relative path or even move the files to some web server. That should be it.
And obviously - update your browser.
BTW: There are some html5 features (like desktop notifications) which won't work locally at all.