I'm having a nightmare trying to get <audio> ... </audio> to work on all browsers. I have to include ogg and mp3 and wav files to get one file to show up in ever browser. Is there an easier way, that is html5 looking? I haven't looked into any jquery libraries or anything yet.
Try, Audio.JS, it is a nice package for audio playback...
audio.js is a drop-in javascript library that allows HTML5’s tag to be used anywhere.
Link to Audio.js
Related
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
I need to play MPEG-1 files dynamically from a browser. Uploading them to YouTube or converting the videos is not an option.
How can I do this?
I've seen this, but the answers do not apply to MPEG-1. Is there a way to play mpeg videos in HTML5?
The video tag is not working for the file with Chrome:
<video class="fullscreen" autoplay>
<source src="video/test2.mpeg">
</video>
It just displays a black box and stuttering noise/sound. I can verify that the video is not corrupt because I can play it with VLC. I only need this to work on one specific browser (it does not have to be cross-compatible). Plugins are OK too, as long as I do not have to convert the video. Though I'd rather avoid them.
Some browsers don't support older formats in <video> on purpose, to limit number of crappy, legacy, and potentially insecurely implemented video formats on the web.
The only combination that has a decent chance of working is H.264 (MP4) and WebM (or Ogg Theora), so you must convert the video and for good browser support you will have to generate at least these two formats.
The good news is that modern codecs are much more efficient than MPEG-1, so you'll get much smaller files.
Other options may be:
Give users a direct link to the video so they can download it and play in an external player like VLC.
Embed video using oldschool <object> element, and hope some browsers still have legacy plugins that can play videos (but e.g. Chrome has recently removed support for all plugins except a couple written specifically for Chrome's own API).
Use Emscripten (asm.js) to compile an MPEG-1 decoder to JavaScript and decode the video yourself to <canvas>. JS these days is fast enough to pull that off (although it will quickly drain battery of mobile devices, and a poor video codec combined with an extra download of a JS decoder will be a massive waste of bandwidth).
You can play MPEG-1 videos using JSMPEG: https://jsmpeg.com/
Sample code here: https://github.com/phoboslab/jsmpeg/blob/master/view-stream.html
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 need to find good way of embedding audio files on a website.
I find out about the based tag in HTML5. But there is an issue of playing music in other format than .mp3 in Firefox and Opera.
The player should be also similar in each browser.
Can you recommend me anything?
HTML5 <audio> is the way to do what you want.
There are shims for browsers that don't already support <audio>, and you can offer fallback formats using the <source> tag, for maximum cross-browser compatibility.
More reading, if you're still unsure:
<Audio> fallback through Javascript
Native audio in the browser
Quick Guide to Implementing the HTML5 Audio Tag (with Fallback to Flash)
I have a OVG video and I would like to put that into my site. I do not know much about that file format so I am concerned how it will be with cross browser compatibility. I know that FF will play the file yet I am unsure about IE (I am only worrying about IE 8+)
What is the best way to put this file into my site? Should I use the HTML 5 <video> tag or should I use another format? I need this to work with IE 8 so I am unsure what the best route is.
Thanks!
You should use video element, with multiple source elements inside, each pointing to a different format of your .ovg file. you can generate cross-browser files at media.io or via Miro converter (download). the best way would be to degrade gracefully for older browsers, you'll want to provide some JavaScript, VideoJS is my preferred lib, you can use their embed builder tool, that'll provide the older fallbacks
For the best compatibility, you'll want to use a video hosting site and embed the Flash video into the site. If you want to host it yourself, you'll have to find a Flash video player that you can use, but I'm pretty sure most or all of those are commercial.
Otherwise you'll need to have both an H264 version (MP4) and an OGG version and include both versions in the source tag. You can then also include a fallback to a Flash embedded version.
You can find out more here.