I want create a html5 audio in dynamic and play it,here is the code:
function playAnotherMusic(playUrl){
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', playUrl);
audioElement.setAttribute('controls', true);
audioElement.setAttribute('preload', true);
audioElement.setAttribute('type', 'audio/mpeg');
audioElement.addEventListener("load", function() {
audioElement.play();
}, true);
console.log(playUrl);
audioElement.load();
}
However it doesn't work,the firebug assigin me "HTTP "Content-Type" of "audio/mpeg" is not supported."
how can I solve this problem?
You can't play mp3 files in firefox, it does not support them, you need an ogg version for firefox. Unless that changes, good to keep in mind.
Why doesn't Firefox support the MP3 file format in <audio>
You need to append the audio element to the an existing element.
This would be something like
document.getElementById("my_audio_div").appendChild(audioElement);
Idealy, this should be done before you add the event listener, but after setting all the attributes
Also try audio/mp3 instead:
audioElement.setAttribute('type', 'audio/mp3');
Related
I am trying to play .mov videos in HTML5 browser. I have tried everything available over the internet e.g.
attribute "controls"
using <source> tag
using src attribute with even changing MIME type to mp4.
But Nothing worked for me. Can anyone suggest solution for this?
The Video tag only supports certain filetypes. The .MOV container uses the Quicktime codec which is proprietary Apple software and is not on the list of Media formats supported by the HTML audio and video elements. I'd suggest transcoding the footage to .MP4 and using that instead.
My suggestion is converting the file to .mp4. There are several softwares you can use to do so. I suggest Handbrake.
https://handbrake.fr/
For jQuery, try this code. What it does it get the data from the input tag and instantiates a FileReader instance. We add an event listener to this instance and we append a <source> tag as child to the <video> tag. We are able to get the duration once the data has been loaded. Adding a type="video/mp4" attribute to the source tag is a small enhancement that would work on most .mov files, but not all (untested). This is an enhancement to another SO answer located here.
$(document).ready(function() {
var data = $('#file-input')[0]; // File from <input type="file"> tag
var reader = new FileReader();
reader.addEventListener('load', function() {
var video = $('<video class="uploaded_video_src" controls></video>');
if (reader.result) {
$('.uploaded_video_src').append(`<source src="${reader.result}" type="video/mp4">`); // Add type attr for support for some .mov files
video.on('loadedmetadata', function() {
console.log('duration:', $(this)[0].duration);
});
}
});
});
How to error handle html5 video + only mp4 source under old browsers.
Most of the browsers have support for html5 but not mp4. How to detect this and output an error for the user?
Keep in mind these things:
The client will use only mp4
The video element will be used multiple videos all mp4
Convertion mp4 to webmm/ogg is not a solution in this case
I need only a way to generate error for browsers that won't play the video. How to do this? Thanks!
You can use HTMLMediaElement.canPlayType() and get the value if your browser support mp4 or not.
var video = document.createElement('video');
console.log(video.canPlayType('video/mp4')); // "maybe"
Possible answers are:
'probably': The specified media type appears to be playable.
'maybe': Cannot tell if the media type is playable without playing it.
'' (empty string): The specified media type definitely cannot be played.
Hi you can handle it as below.
var videoSource1 = '<source src="//anc.com/video1.webm" type="video/webm"/>';
var videoSource2 = '<source src ="//abc.com/video2.mp4" type = "video/mp4"/>';
var videoSource = videoSource1 + videoSource2;
$('.video-container').append(videoSource);
The above code will detect any one of file on the basis of browser support.
I am currently working in using the HTML5 audio player to provide a audio stream (24/7 radio stream) via the (mobile) browser. Loading in the stream and playing it works fine.
The major problem is that the HTML5 <audio> tag will keep downloading (buffering) content even when its not active. This could be a major issue for mobile users since most of them pay for data use. So far I have not been able to find a decent solutions that works cross browser to prevent this.
I tried so far:
Unload the source when pause is pressed. < This does not work cross browser
Remove the audio player element and load a new one. This works but
lets be honest, this is a very hacky way of performing an extremely
simple task.
I was simply wondering if there is something I'm overlooking in this whole issue since I am convinced I'm not the only one with this issue.
The <audio> element includes a preload attribute. This can be set to "none" or "metadata" which should prevent the audio preloading.
Source: https://developer.mozilla.org/en/docs/Web/HTML/Element/audio
I found a workable solution for the problem described above. A detail description can be found here: https://stackoverflow.com/a/13302599/1580615
You can do the following to stop buffering load without errors:
var blob = new Blob([], {type: "audio/mp3"});
var url = URL.createObjectURL(blob);
audio.src = _url;
or, shortened up:
audio.src = URL.createObjectURL(new Blob([], {type:"audio/mp3"});
Now you're not loading a "" which is a bad url for the audio tag to try and load. You're instead loading an actual url made from a Blob that just contains no data for the audio to playback.
I am working on creating a sound board with various audio clips.
Rather than using the standard HTML5 audio controls, I want to style each button with some title text, so that when a user presses a button, the associated clip plays.
Everything is working fine in HTML 5 browsers (Chrome, Firefox, Safari, and IE9+), using the following code:
<script type="text/javascript" charset="utf-8">
$(function() {
$("audio").removeAttr("controls").each(function(i, audioElement) {
var audio = $(this);
var that = this; //closure to keep reference to current audio tag
$("#doc").append($('<button>'+audio.attr("title")+'</button>').click(function() {
that.play();
}));
});
});
</script>
<!-- Sample Audio Clip -->
<audio controls preload="auto" autobuffer title="Sounds of Laughter">
<source src="assets/clips/1.mp3" />
<source src="assets/clips/1.ogg" />
</audio>
However, this solution is not supported on non-HTML 5 compliant browsers like Internet Explorer 8.
I am looking for some sort of workaround solution that will allow me to either (a) detect if a browser doesn't support the HTML 5 tag and redirect to an alternate version of the sound board or (b) use a fallback (flash, etc.) with custom styling on the button if support is not present.
You should use both Modernizr as Garret said and jPlayer
Check Garrett's answer on how to check for compatibility. Though I don't see why it would be useful if your only goal is to seamlessly play HTML5 or Flash based on compatibility. jPlayer does it automatically.
You just have to instantiate it:
$("#music").jPlayer({
ready: function (event) {
$(this).jPlayer("setMedia", {
mp3:"music.mp3",
oga:"music.ogg"
});
},
swfPath: "js",
supplied: "mp3, oga"
});
The following depends on the interface you want to use. jPlayer has some skins, but you can modify them to your will or just create a whole interface from scratch like I do and use jPlayer methids
You should take a look at the Modernizr script library. This will allow you to perform conditional logic based on what HTML5 features are supported by the browser. For example, you could do something like this:
var audio = new Audio();
audio.src = Modernizr.audio.ogg ? 'background.ogg' :
Modernizr.audio.mp3 ? 'background.mp3' :
'background.m4a';
audio.play();
Documentation can be found here: http://modernizr.com/docs/#features-html5.
I found another example which I have slightly modified for MP3 to OGG fallback. It uses the canPlayType method:
var audiofile = 'example.mp3';
var audioTag = document.createElement('audio');
if (!(!!(audioTag.canPlayType) && ("no" != audioTag.canPlayType("audio/mpeg"))
&& ("" != audioTag.canPlayType("audio/mpeg")))) {
audiofile = audiofile.replace('.mp3','.ogg');
}
I want to play a mp3 using HTML 5 audio support.
I was trying to use an audio tag but now I am doing it using javascript.
My "Player" will be just a tiny Play image, that when is pressed plays the audio (not all the audio control with progress).
I am trying to play it using javascript .
function playmp3(url){
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', url);
audioElement.load();
audioElement.play();
}
This is my code and it does not work. It executes ok when I click an image that is my Play button.
Url is a string that contains the url of a file.
I am testing in the newest versions of Chrome and FF.
Trying listening for the canplay event before attempting to play the mp3. Here's an example of how to do that:
function playmp3(url){
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', url);
audioElement.load();
audioElement.addEventListener("canplay", function() {
audioElement.play();
});
}
The canplay event is fired when the browser can start playing the mp3, but it doesn't guarantee that it can play the mp3 to completion. If that doesn't suite your purposes, there are a couple of other related events that you can listen to such as loadeddata and canplaythrough.