<audio controls>
<source src="/audio/{$link_data.ID}.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
I have a mix of text like pages in a book, images and audio on my website. When you move from page to page a new mp3 is being loaded and sometimes images.
Sometimes people only read the text or play the audio or a mix of the two.
I was wondering what the best way is to have the audio available without it downloading (on each new page). By being available I mean that you would press the play button before it started to stream the audio.
Just set preload="none".
<audio controls preload="none">
The media will not begin downloading until requested by the user.
Reference:
http://www.w3.org/TR/html-markup/audio.html#audio.attrs.preload
Related
I am trying to build a web-app for reminding me for doing a certain task with sound alarm.
You could use html5 audio tag and jquery:
// appending HTML5 Audio Tag in HTML Body
$('<audio id="chatAudio">
<source src="notify.ogg" type="audio/ogg">
<source src="notify.mp3" type="audio/mpeg">
</audio>').appendTo('body');
// play sound
$('#chatAudio')[0].play();
link
or a simple <audio> tag
You could also use the moment library for date-time functions.
https://momentjs.com/ to call the above function.
I have an HTML audio element that plays a linked .mp3 file upon click:
<audio id="yourAudio" preload="none" onplay="playing(this);" onended="stopped(this);">
<source src="/sandboxassets/pronunciations/esdar1e007.mp3" type="audio/mpeg">
</audio>
I don't want to display the direct link to the audio file (/sandboxassets/pronunciations/esdar1e007.mp3) in the HTML source. Is there any way to obfuscate it? I know we can use base64 encoding to obfuscate image links turning them into data URIs but I don't know how to do the same with mp3 files, if at all that's possible. Also, will that be a wise move compatibility-wise?
Addition: For what it's worth, there could be up to 5 such audio elements on my page and each such element loads an mp3 of size between 8kB and 20kB. I am assuming this scenario should justify a higher file size vs. fewer HTTP requests tradeoff. But please correct me if I'm wrong.
Yes, you can use data URIs to do this. Just put the data URI in your src value. For example:
<audio controls src="data:audio/ogg;base64,XXXXXX....." />
See this page for a working example
I have a problem of playing the html5 video(MP4 format) using video tag on linux. Could you please suggest What may be the problem or any alternative solution to make my video play on al l browsers along with all Operationg Systems.
Thanks in advance.
HTML5 doesn’t guarantee any particular video format will be supported by a browser; the solution is to use multiple sources:
A video, using the user agent default set of controls, with alternative sources:
<video controls>
<source src="http://media.w3.org/2010/05/sintel/trailer.mp4"
type='video/mp4; codecs="avc1, mp4a"'>
<source src="http://media.w3.org/2010/05/sintel/trailer.ogv"
type='video/ogg; codecs="theora, vorbis"'>
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
I know this is ridiculous, but I'm learning...
In a Chrome application I let my sender initiate and load a Custom receiver.
The receiver page includes a video element set to play one specific video, like this:
<video autoplay>
<source src="../media/someVideo.mp4" type="video/mp4">
</video>
The receiver page and the media file are hosted on a web server (SP)
I use no further communication between sender and receiver, so the receiver just loads and plays the video.
It works beautifully, but the video size on the device (TV) is too big. It fills the screen, but I don't see the full picture.
I try to downsize the video using CSS or by setting the width and height parameters on the video element, but the result is the same. Why doesn't ChromeCast respect these settings?
width/height for the video element should work. As a test, just set width and height in the element itself and test. On a tv screen, in general, there is a notion of overscan and most modern tv sets have a setting to adjust that, you might want to check to see if your tv offers that too or not.
I'm trying to create a mobile ready audio player. However, I'm wondering if it's possible to "mask" the src so that a user couldn't view source and download the mp3. I'm definitely a n00b, so any simple direction would be extremely helpful (IE - use 'x' to do 'y'). I don't necessarily need code examples. Thanks!
Current:
<audio src="unreleased_track01mp3">
...
</audio>
What I'd like:
<audio src="01238134781239871">
...
</audio>
No.
You could attempt to stream the audio, but if you want to play a specific file, the user will always be able to download it if the user is able to listen to it.