HTML5 audio link masking? - audio

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.

Related

Adding HTML5 audio as embedded mp3 data URI

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

html5 audio player and .aif files on the web

I have been asked to use aif audio files on a website. I am using jplayer.
Would there be a noticeable difference using .aif?
Which browsers support .aif?
Would you advise using .aif for the web?
Would it mean I would need 3 versions of each track to cover all Browsers/OS?
Like so:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.aif" type="audio/aif">
Your browser does not support the audio element.
</audio>
Thanks :)
The most widely supported format currently is mp3, aiff is supported but you'd need to test target browsers to determine which offer support.
You might also consider SoundJS, a library I helped develop that lets you play audio across a broad range of browsers and devices using a single code base.
Hope that helps.
Check your own browser.
I could not find a comprehensive list like you have asked for. So this is the second best.

Embed audio to save bandwidth? To embed or stream?

<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

JSF play video file

I want to play a video file from my web app. I use JSF. I want to know how we can open the video file with the help of any video player installed in the client's system. I know how to open a pdf file the same way. But I want to know how to open a video file.
There's no standard JSF component for this. It's however not different from as you would do in plain HTML. Just drop the video file in public webcontent (so that it's reachable by an URL) and use the HTML <embed> and/or the <object> element which points to the URL of the video file. That's basically all. Note that you can just use EL in template text. So e.g. <embed src="#{bean.videoURL}"> would work perfectly fine, as long as it generates the HTML code the way you intend (open page in browser, rightclick and View Source to see it).
The way how to create and parameterize the HTML <embed> or <object> tag in turn depends on the video format (MPEG, MOV, FLV, etc). You basically need to consult the documentation of the video format vendor for details how to use it. Since you didn't mention what format the video file is in, we can't help you further in detail. Googling the smart way should however yield sufficient examples. E.g. "embed mpeg in html".
PrimeFaces has however a <p:media> component which makes it all easier for developers who are lazy in Googling for examples and/or figuring the browser specific inconsitenties ;) It'll outright generate the right HTML code necessary for the provided video format.
See also:
How to stream audio/video files such as MP3, MP4, AVI, etc using a Servlet
This works in browsers those support HTML5.
<video controls="controls">
<source src="resources/myVideo.mp4" type="video/mp4"/>
</video>

Best way to play wav files in the browser?

I have no choice but to play wav files directly in the browser (serverside encoding to mp3 isn't an option, unfortunately.)
What's the best way to do this? I'd really like to take advantage of the HTML 5 audio tag but my target audience includes many, many teens using IE6. As far as I'm aware flash isn't an option, but speedy playback really is critical.
Thanks.
Nowadays, the best way is probably just to use the HTML5 <audio> tag. In the past, you might have done it like this:
Background:
<embed src="bgsound.wav" hidden="true" autostart="true" loop="1">
On Click:
Play Sound
It's been a few years since the last answer. Embed tag was good but I had an issue trying to trigger it to play in JavaScript. New audio tag works well is most browsers.
<audio src="cat9.wav" preload></audio>
You can trigger it manually with audioElement.play()
<audio controls="controls"><source src="http://blablabla.com/hghghgh/my%20file.wav" type="audio/x-wav" /></audio>
Due to unfixed bug (issue from 2012 year?) sometimes Chromium-like browsers cannot play .wav from redirected URLs because they "think" that file size is zero. But .mp3 is OK.
Opera 12.14 and Firefox play from < audio >
tag normally in the same case (redirected URL).
I tried JPlayer's 2.9.* lib in Drupal 7 with 3 players, but not successful (was black inactive rectangle 300*14 pixels for each player).

Resources