I am a complete novice and am studying HTML5 and CSS.
I am building a simple web page (on my local computer not a server) on my C:/ drive to play a musical audio with controls.
My speakers and sound work fine when I am on any website, etc. but I cannot get this web page to play my audio file. All I get is a hiss.
I have searched and searched for what my problem is but cannot find it.
Here is my html file:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>audio.html</title>
</head>
<body>
<h1>Audio Demo</h1>
<audio controls = "controls">
<source src = "0124.wav" type="audio/wav">
<source src = "0124.mp3" type="audio/mp3">
</audio>
</body>
</html>
I would certainly appreciate any assistance.
Thank you.
The browser can be called the client - everything it can show you lives on some server. Luckily you can use your computer as a server. Put into the same directory where your above html file lives those wav and mp3 files. Then just point your browser at the full path to reach your html file (your URL) similar to
file:///home/scott/Documents/data/audio/play.html
evidently to show both files you may wish arrange as :
<audio controls = "controls">
<source src = "0124.wav" type="audio/wav">
</audio>
<br>
<audio controls = "controls">
<source src = "0124.mp3" type="audio/mp3">
</audio>
Related
It just doesn't play.
This is the code for the player:
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="https://www.reportercatolico.com.br/audios/1cd5d4f1448ae07340406213d5da61dc.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
What am I doing wrong?
I was testing a basic track html page from my desktop, and it seems that that the closed captioning works in Firefox and IE, but not Edge or Chrome. Edge shows the CC button and that it's running, but doesn't display any text, while Chrome doesn't even show CC button for me. From a website, they all work except Edge again. Ideas?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>CC Track Test</title>
</head>
<body>
<video controls src="movie.mp4">
<track default kind="subtitles" label="caption" srclang="en" src="entrack.vtt" />
Sorry, your browser doesn't support embedded videos.
</video>
</body>
</html>
VTT:
WEBVTT
0
00:00:02.000 --> 00:00:14.000
This is a test caption.
1
00:00:18.700 --> 00:00:28.500
And this is a second test caption.
I'm trying to find a tag/code that allows me to play background music when a webpage is launched or executed, is there any that is compatible with Google Chrome and if there are any, which codes work with chrome?
<!DOCTYPE html PUBLIC "-//w3c//DTD HTML 4.01 Transitional//EN"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>My First Web Application</title>
</head>
<body>
<bgsound src="music/sample.mp3">
<noembed><img src="images/download.jpg" ></noembed>
</bgsound>
Fur Elise
</body>
</html>
The <bgsound> tag is Internet Explorer-specific and will thus not work in other browsers such as FireFox or Chrome. The <embed> tag should work in FireFox and Chrome if you use it correctly. It will use a browser plug-in to play the sound. Below is an example:
<embed loop="true" src="music/sample.mp3" hidden="true" type="video/quicktime"></embed>
loop="true" specifies to play the sound repeatedly.
src="sample.mp3" specifies the relative path of the sound file to play. The variety of formats you can play depends on what type= you specify.
hidden="true" indicates to not show the media player's interface. Hide it if you want the user to not be able to pause, stop, or navigate through the sound.
type="video/quicktime" specifies to use a Quicktime component, which means the client must have Quicktime installed. Use application/x-mplayer2 for Windows Media Player or audio/x-pn-realaudio-plugin for Real Player audio. Quicktime plays more formats and is probably what you will want to use.
Alternatively, use <object> in a very similar way. An example is below:
<object data="music/sample.mp3" type="video/quicktime" width="0" height="0">
<param name="mp3" value="music/sample.mp3">
<param name="autostart" value="1">
<param name="playcount" value="true">
</object>
The embedding method places a media player in your page. Here's the most basic version of the code:
<audio controls="controls"><source src="music/sample.mp3" type="audio/mpeg" /></audio>
If you would prefer not to show the player (and give the user no control), use this code:
<audio><source src="music/sample.mp3" type="audio/mpeg" /></audio>
A video needs to be shown on a website. I used HTML5 and the tag with WebM, Theora/OGV and H.264/MP4. This video is looking nice on most browser/OS combinations, but the colors are distorted when watching it with Quicktime on Windows.
Is there a canonical way to ensure consistent colors? If there is not, can I order a browser to not use Quicktime on Windows if an alternative is available?
The current approach is taken from this tutorial.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Testvideo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="video.css">
</head>
<body bgcolor="#000000" marginwidth="0" marginheight="0">
<center>
<H2>Endeavour</H2>
<video width="320" height="240" controls>
<source src="endeavour.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
<source src="endeavour.webm" type="video/webm; codecs=vp8,vorbis">
<source src="endeavour.ogv" type="video/ogg; codecs=theora,vorbis">
</video>
</center>
</body>
I'm not sure I understand your question 100% but the order you supply as sources will determine which video to prefer - if you want the webm file to be preferred you simply add it first:
...
<source src="endeavour.webm" type="video/webm; codecs=vp8,vorbis">
<source src="endeavour.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
<source src="endeavour.ogv" type="video/ogg; codecs=theora,vorbis">
...
You cannot force a browser to use (or not to use) a specific plugin installed by the user.
As to colors this depends on how the video files are compressed and how they are encoded.
I have a basic html file. In the file I have an image tag which references a SVG file.
When I view the file in IE10 the page remains blank rather then showing the expected vector image.
The SVG file was made with Inkscape.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<img src="Images/MyLOGO.svg" width="400"/>
</form>
</body>
</html>
What is the best way to troubleshoot this problem?
One reason could be because in IE9+, Chrome and Safari won’t apply stylesheet rules to the SVG if they’re defined in a separate CSS file.
The SVG file must have been invalid. I have replaced it with a different SVG file and all works as expected.