I want to embed the audio file on the html page on the server. The audio file is in the same folder as the html file, the path in src in the tag audio is correct, why is it not playing?
html file
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<audio>
<source src="f.mp3" type="audio/mp3">
</audio>
</body>
</html>
As described in mdn (https://developer.mozilla.org/fr/docs/Web/HTML/Element/audio), the <audio> tag should be writted like
<audio src="f.mp3" type="audio/mp3"></audio>.
If you want to display your player, add controls to your tag.
If you want to play the media when the page load, you can add autoplay, but, many web browser not enable autoplay by default as you can read here https://developer.chrome.com/blog/autoplay/
Related
I want to play this audio live stream in html browser
http://uk3.internet-radio.com:8405/live
I tried several players with no hope
any player than can do that? or plugin
You can try something like this:
<html>
<head>
<meta name="viewport" content="width=device-width">
</head>
<body>
<video controls="" autoplay="" name="media">
<source src="http://uk3.internet-radio.com:8405/live" type="audio/aac">
</video>
</body>
</html>
To try, save it as .html file and run.
I am trying to use the track element with audio element but it is not working for me, can someone give me some guidance
Looking in my console I dont see an error but i see this
Resource interpreted as TextTrack but transferred with MIME type text/plain: "http://127.0.0.1/output_trim.vtt".
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
<audio width="900" height="900" controls >
<source src="output_trim.ogg" type="audio/ogg">
<track label="English" kind="subtitles" srclang="en" src="http://127.0.0.1/output_trim.vtt" default>
</video>
</body>
</html>
You can try loading a webm audio file as the src attribute for a video element. Then you can set the length and width attributes of the video element so it looks like a music player. I've done this using the URL.createObjectURL() to play local audio with .vtt files on my drive but I'm not sure about other use cases.
I want to display a background music in my web page, the html code is like this:
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test</title>
</head>
<body>
<EMBED loop=-1 style="FILTER: blue()" width="0" height="0" src="Valder Fields.mp3" autostart="true" > </EMBED>
</body>
</html>
and I have put the music into the same folder of this html file, and I run it well when I test it without use web server,but when I put them into the web server and open this page again,the browser downloads the music and do not display the music,why? And what I should do if I want to display the background music when I use web server?(I use tomcat 8.0 as my web server,and I have tried other version of tomcat, they cannot work as I expect too).
somehow you can use this instead of Embed
Jsfiddle
<audio controls autoplay style="display:none;">
<source src="http://f9.stream.nixcdn.com/bd4ec51ddb6643f1b1a9703df2a5702f/54699824/NhacCuaTui877/TheHappiestTimeOfMyLife-MCMongHuhGak-3645129.mp3" type="audio/mpeg">
</audio>
Embed the audio with HTML5.
<audio src="Valder Fields.mp3" preload="auto" controls></audio>
There are other options which you can find here
I am trying to play audio with HTML5 audio tag; reading different articles made me aware that Firefox does not play mp3, but plays ogg file so I linked two files to make it compatible with Firefox: Here's y code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Audio Player</title>
</head>
<body>
<audio id="Mp3Me" autoplay autobuffer controls>
<source src="audio/audio.mp3">
<source src="audio/audio.ogg">
</audio>
</body>
</html>
I have two separate servers, the first one can read ogg audio file but the other one does not. The server that reads the file allows me to download the ogg file when I try to access it by editing the address page of my browser, but with my other browser, this is what it displays:
Please provide me sources to fix this problem.
I am trying to make an audio player using HTML 5 project template. I am using the following HTML code :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="/html/css/phone.css" />
<title>Windows Phone</title>
</head>
<body>
<div>
<p>Audio Player</p>
</div>
<div id="page-title">
<p>Play Audio</p>
<audio controls="">
<source src="horse.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</div>
</body>
</html>
I picked up this code from here, I have added the "horse.ogg" to the solution explorer as shown in the screenshot below...
But when I run this appication I get the following output, it reads
Invalid Source
But when I open the same html using a browser I am able to play the file properly.
What could be the problem ?
Is there a better and easier way in which I could play audio files which I will add to the solution explorer and play using HTML 5 ? I am planning to add 10-15 small and funny audio clips and the app will allow user to select it and play it using HTML 5.
Please share your thoughts on this.
As the error message says, it's an invalid source.
Internet Explorer 10 doesn't support Ogg audio files, but MP3 files. Convert your Ogg to an MP3 and it should work fine.
<audio controls>
<source src="horse.mp3" type="audio/mp3">
</audio>
Also, if you're only providing one source you can use the src attribute of the audio element:
<audio src="horse.mp3" controls></audio>
But this is only really recommended if you are targetting one particular type of browser only.