Why cann't I display background music in my web page? - html

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

Related

Audio file not playing

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/

<audio> tag is not working in IE11

I'm trying to make a simple audio test in html5 (Windows 7) and it works in Firefox and Chrome, but not in IE11. Can anyone help me, please? This is my simple HTML file:
<!DOCTYPE html>
<html>
<head>
<title>My Title</title>
</head>
<body>
<audio controls>
<source src="myAudioFile.mp3" type="audio/mp3"/>
</audio>
</body>
</html>
I have read all questions related, but my problem is not fixed. Also, I tryed to add this, but still no luck:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
I always get the "invalid source" message and I don't know what else can I do.
The problem is that IE11 makes you enable the setting "Play Sounds in Webpage" before any sounds will play. Which, in my opinion, is a willing and intentional breakage of HTML5 audio. I'm so pissed at MS for this. They constantly go against what they preach, and they wonder why nobody uses their shitty browser anymore. Anyway, here's how to enable the setting:
Open Internet Explorer, click the Tools button,
Click Internet Options. Tap or click the Advanced tab
Under Multimedia, select Play sounds in webpage.
Click Apply, OK. Now check if you can play the mp3 files.
As far as a programmatic fix for this, I don't know of any. You could alert IE users to change their setting, or you could offer a download link as an alternative to the in-browser player.
This will do the trick:
IE--> Internet Options--> Advanced--> Enable play sounds in webpages.
source: https://forums.asp.net/t/2111915.aspx?Error+Audio+Playback+was+aborted
Your source type looks like it may be incorrect. Try this:
<audio controls>
<source src="myAudioFile.mp3" type="audio/mpeg"/>
</audio>
Some Times html5 audio tag doesnot work without controls or clear its chaches and try below code if any problem please reply. Hope so you are out of trouble.
Have a good day
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Audio Tag</title>
</head>
<body>
<!--Before HTML5, Developer can add audio tag by Plug-in like FLASH. But HTML5 introduces an audio tag for embedded an audio media in a web page**strong text**-->
<audio controls="controls">
<source src="Allegro%20from%20Duet%20in%20C%20Major.mp3" type="audio/mp3">
</audio>
</body>
</html>

Does the html5 video tag work with windows hta?

I am writing a simple game using HTML5 and JS, to run on my own machine. I want to be able to play a video and to know when the video has finished, and I want to be able to write to a file on an external drive as a backup.
I was going to use Adobe Air, but it doesn't support the HTML5 video tag, so I tried HTA. I can't find anything on the web saying definitely if the video tag is supported or not.
<html>
<head>
<title>Test page</title>
</head>
<body>
<video id="vid_1" width="720" height="480" autoplay><source src="videos/intro.mp4" type="video/mp4"></video>
</body>
</html>
works fine in a browser, but just a blank screen as a .hta
Is the video tag supported in HTA? Or is it the video format that's the problem?
I have tried mpeg and flv, and I have tried an absolute path for the video source.
added later: using windows 7, IE11
So that HTA supports HTML5 elements, you need to add the<meta http-equiv="x-ua-compatible" content="ie=edge" /> tag. But this may not be a very good solution because then elements like frames or the <hta:application> tag don't work. Instead of the <video> tag, you can use the <embed> tag, like this:
<embed src="videos/intro.mp4" width="720" height="480" autostart="true" type="video/mp4">

How to embed html video without using youtube

Apparently I'm a total noob when it comes to web development. I just need help making a simple html file that embeds a video. I can't use youtube. I just need to embed the local file and it's not working.
<!DOCTYPE html>
<head>
<title>Testing</title>
</head>
<body>
<video id="0" controls width="502" height="479">
<source src="OWA tutorial.webm" type='video/webm'>
<source src="OWA tutorial.mp4" type='video/mp4'>
<p>Video is not visible, most likely your browser does not support HTML5 video</p>
</video>
</body>
</html>
This doesn't work. "OWA tutorial.mp4" is in the same folder as the html file. What am I doing wrong?
Tried this:
<!DOCTYPE html>
<head>
<title>Testing</title>
</head>
<body>
<video id="0" width="502" height="479" controls>
<source src="loop.ogv" type="video/ogg">
<p>Video is not visible, most likely your browser does not support HTML5 video</p>
</video>
</body>
</html>
Worked well. Just replace the ogg with mp4, in your case.
Edit:
I'm not saying that you should use .ogv instead of .mp4.
I just used it as example because I've tried with a .ogv file (just because I don't have a .mp4 file here right now).
Your code should work if you copy mine and just replace the "loop.ogv" with your filename and the "video/ogg" with "video/mp4".
Sorry if it was misleading.

Audio not playing using HTML 5 in Windows 8 Phone

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.