I happened to set the .src attribute of an html video tag to a .mp3 audio URL in Google Chrome. To my surprise the UI of the video tag morphed to look like an audio tag (except for the height).
The purpose of loading the URL was just to see if it were a usable video URL.
Now, I wonder, if this some kind of standard behavior? Should I expect it to continue behave like that?
And how do I know that it was an audio file and not a video file? From what I can see i the debugger the .videoHeight and .videoWidth are 0, but I do not know if that is reliable?
Related
I am making a website using only HTML and CSS. I am trying to link to an online mp3 file (that I do not own) so that the mp3 plays in the browser. This simple code does what I want on Firefox and Safari:
<a href="https://www.allaboutbirds.org/guide/assets/sound/548271.mp3" >
However, instead of playing the mp3, Chrome automatically downloads the mp3 file to my computer. Is there some way I can alter my HTML code (not my browser preferences) to stop this from happening? Thanks.
You can't guarantee that all the browsers will have a built-in in-frame player for the audio file.
The best thing to do in this case is to embed the audio player into a page with the audio element:
<audio src="https://example.com/some-sound.mp3" controls></audio>
My hosting doesn't allow me to upload mp3 or any audio files, so is there any way I can link audio in some other way? I know we can embed soundcloud and stuff but just wondering if there was any other alternative.
I’ve found this very useful guide that covers some alternatives:
Linking to a sound file using a href allows a browser to open and play
an audio file if the viewer of your web page has properly configured
their Internet browser. You can also use the tag or the newer
tag to insert a sound file directly into a web page.
<a href> tag
<a href="https://www.computerhope.com/jargon/m/example.mp3">Play sound
file</a>
<audio> tag
The tag can create a media player as part of the web page. It allows the visitor to play, stop, pause, or download an audio file. The element is compatible with all modern web browsers.
<audio controls>
<source src="https://www.computerhope.com/jargon/m/example.mp3" />
</audio>
<embed> tag
An older method of including audio files is to use the tag. While this method certainly works, it is less efficient than those which were mentioned above. As such, we recommend using one of the solutions demonstrated above.
<embed src="https://www.computerhope.com/jargon/m/example.mp3">
I figured the best way to do it without uploading your audio/music, BASE64 ENCODING!!
Very easy, kinda messy and supposed to be used for images I guess but works fine with audios and should work with videos as well (haven't tried videos)
Here a base64 encoder: https://omatsuri.app/b64-encoding
WARNING THOUGH! IT MIGHT GET LAGGY & MESSY
On a project, i have an iframe and a link targeting it. The link leads to an mp3 file. However on google chrome, and maybe other browsers, the iframe appears with a horrible black background.
Is there any way to fix this?
All solutions i have found so far talk about changing the background in the source file, but this is not possible for me as it is an mp3 file not an html file.
You have zero control over the default presentation of an audio player when you link to it in this way. In fact, it's very common that the file will just be downloaded instead of played in a browser.
If you want to control it, you need to build an HTML page that loads the audio file.
i am coding on a custom player for quite a while now.
My plan was to use soundcloud as my backend. And the HTML5 audio Tag as my streaming object.
I also want to include a Canvas for a bit of visualisation. And thats were the problem starts.
For the Visuals to work on both Browsers, I need to load the audio into an arraybuffer via xhr request. But then I can't use the audio Tag anymore. Which is sad, because by now I know how to code all the functionality i need based on it.
I found the article on html5rocks about html5 audio and WebAudio being best friends.
There is also an example on how to use the tag with an frequency bar visualizer. BUT
this only works on Chrome, because Firefox - maybe some of you have noticed - will play .mp3 files but inside a video object. For the visuals to work I would need .ogg files for Firefox. But then i can't use soundcloud as my backend anymore.
So do i have to rethink the whole player - or is there a way to decode the audio on both browsers while using html 5 audio?
thank you very much.
That's an issue with FF (no MP3 support in <audio>). But can't you get a media stream from the element also? It shouldn't matter that it's a not an - audioContext.createMediaElementSource should work on that, too.
i want to embed video file in my html file and that video file is saved in same folder where my html page is saved?so how can i embed that video?
I would advise using HTML5 to do this:
<video src="myvideo.avi"/>
This will work for Firefox 3.0+, Chrome and Safari. Not sure about the early IE (Internet Explorers). It also avoids having to use Flash to render a video window.
W3C Schools has a good article on the use of the video tag
W3schools has a great reference on the <video> tag here:http://www.w3schools.com/html/html5_video.asp
Another solution is to upload your videos to youtube and then embed the video on your site. It takes less server space on your part, it is widely supported, and you can get discovered easier.