I have added Audio to a webpage, to play once it loads, which works fine in Internet explorer but not in Google Chrome.
<audio autoplay>
<source src="gears_01.ogg" type="audio/ogg">
<source src="gears.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
I then added the following Javascript and gave the audio element the ID audioId. Again this worked perfectly in IE, but still nothing in Chrome, unless I Hit the CTRL and F5 keys together a couple of time and then chrome would play the audio file.
var audio = document.getElementById("audioId");
audio.autoplay = true;
audio.load();
I have tried a host of code snipets and suggestions from various forums etc, but i just can't seem to get chrome to autoplay the audio. If i add controls it is fine, it just wont autoplay.
UPDATE:
So i have discovered that if i load the page from a link then the audio plays, but if i just type in the URL of the page, nothing happens.
I'm not sure on the reason why Chrome can be funny with autoplay. I tend not to trust it. This isn't really an answer for your question, but a work around for the problem.
Instead of using the autoplay attribute on the audio control. Use the canplay event on the element.
var audio = document.getElementById("audioId");
audio.oncanplay = function(){
audio.play();
}
audio.load();
When the canplay event is fired, call play() on the audio element to start playing. You're creating your own auto play. Just remember unless you remove the event, any time the audio control loads a new file and can play the audio, the event gets fired. I tend to use this method to give me more flexability pre-playing the audio/video.
Related
audio autoplay working in Mozilla, Microsoft edge and old google chrome as well but not in new google chrome. they have blocked the autoplay. is there any way to make it audio autoplay in google chrome?
the answer given on this: How to make audio autoplay on chrome
is no longer working.
Try This
The best fix I could get was adding this code just after the
var x = document.getElementById("myAudio");
x.play();
<audio id="myAudio" controls>
<source src="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
There is a smart hack that will autoplay with sound once get required microphone permission from users:
navigator.mediaDevices.getUserMedia({ audio: true }).then(function (stream) {
var x = document.getElementById("myAudio");
x.play();
// stop microphone stream acquired by getUserMedia
stream.getTracks().forEach(function (track) { track.stop(); });
});
It works because as long as you are capturing then you are allowed to play and then stop the microphone stream when your audio starts playing.
Otherwise, you have to instruct users to allow Sound Permission using site settings themselves which is technically weird.
Here is a way to get this to happen....
Using a redirect will take you to a 'new' page - just make the 'new' page as you want. In this case I'm redirecting to the sound and it plays immediately.
<head>
<meta http-equiv="refresh" content="0; URL=http://xyz/myrecord.mp3" />
</head>
<body></body>
Its that easy
Here follows the code snippet am using where TextToSpeech is a servlet which returns audio stream (via ServletOutputStream).
<audio autoplay controls>
<source src="/TextToSpeech?input=Welcome" type="audio/wav" />
Your browser does not support the audio element
</audio>
But Chrome browser is NOT auto-playing the audio. Can any one help me please?
P.S: I did test the audio stream by saving it to a file and it played well. So no issue with audio that returned from the server.
On mobile the audio autoplay function is usually disabled in order to avoid data traffic usage without explicit action from the user.
You could workaround that using javascript, when the page is loaded (i.e. jQuery.onready() ) you can start playing the audio file with something like that:
var audio = document.getElementById("audioId");
audio.autoplay = true;
audio.load();
I have this html in index.php:
other
<audio id="music" controls>
<source src="music/music.mp3" type="audio/mpeg">
</audio>
And I need that audio was playing even if I click other.php. But when I click, so I want to play music where it was stopped on index.php.
Some ideas?
The window.onbeforeunload property allows you to register an function that runs when the user leaves the page.
The <audio> element has a currentTime property that tells you how much of the audio file has been played so far. If you set it to a new time, the audio element will skip to that point in the media file (although I think you’ll have to wait until the file has loaded).
You can save data from JavaScript to the user’s browser using cookies and, where supported, HTML5 Local Storage.
So — you could set a window.onbeforeunload handler function on index.php to save the currentTime of your audio element to a cookie or local storage, then set a window.onload handler function on other.php to read the saved currentTime and write it to the audio element there.
There Will Be Bugs. But it should be possible to make it work, give or take.
I have a Fancybox2 window popping up with the following code:
var mediaElementPlayers = [];
$("#video_list_widget a.video_link").fancybox({
padding : 0,
width:500,
height: 360,
closeBtn: false,
content: '<video width="500" height="360" controls="controls" autoplay="autoplay" preload="auto">
<source type="video/mp4" src="http://pathtomyvideo.mp4" />
<source type="video/webm" src="http://pathtomyvideo.webm" />
</video>',
afterShow: function() {
var mediaElementPlayers = [];
$('video,audio').each(function(){
mediaElementPlayers.push(new MediaElementPlayer(this));
console.log(mediaElementPlayers);
});
},
beforeClose: function(){
for (var i=0; i<mediaElementPlayers.length; i++){
console.log(mediaElementPlayers);
mediaElementPlayers[i].pause(); // pause
mediaElementPlayers[i].setCurrentTime(0); // rewind
}
$('.fancybox-inner').empty();
},
afterClose: function (){
$('video').remove();
}
});
The first time I click the a.video_link, it pops up and plays just fine. Let's call this one Video 1. If I close the lightbox without stopping the video, it's stopped and killed. No problem.
If I click on the a.video_link again, it pops up and starts from the beginning (let's call this Video 2), but with the audio from Video 1 also playing over the top of it. If I now close Video 2's lightbox, the audio from Video 1 keeps playing. If I open the lightbox a third time, the audio from Video 2 also starts. This keeps going, so I can have lots of layers of audio over one another.
Can anyone suggest a solution?
Update: I can tell you that it doesn't occur when the autoplay attribute is removed, which suggests to me that the raw <video> object is playing before it can get wrapped in the mediaplayer js stuff. I'd really like the autoplay functionality if possible.
This is just a guess, but I would imagine it is something to do with your selectors.
When you open/play a video it seems that it is also triggering the other ones on the page - I think the autoplay attribute is actually helping you by showing you that some of your code is targeting other players on the page that you don't want to mess with.
I would imagine it is this line that is the problem because it is acting globally on the page targeting all audio and video tags on the page, not just the audio/video tags within the specific element:
$('video,audio').each(function(){
I would change this line so it targets only specific audio/video tags - you could do this by giving the audio/video tags and id attribute or use jQuery to search - I don't have access to your code so this is probably won't work but it should be close to what you need:
$(this).find('video,audio').each(function(){
Hope this helps!
I have a simple HTML5 Audio player on my website like this:
<audio src="file.ogg" preload="none" loop="loop" controls="controls" >
Your browser does not support the audio element.
</audio >
I want that if the file was played to end the file should be reloaded. now if the file is played and I click on play again it plays the file which is in the clients browser cache. but I want if I click play the file should be loaded again from the browser.
You really cant.
What you can do is. that is what I would do at least .embed a js to be triggered when you hit play button(just a play image not the actual file) that should create a new audio tag.
that way it creates a new audio. Audio is super limited.
No way to control buffering, there was a flag at somepoint to disable the buffering they removed it.
If you have, for example, "stopped" the media with:
media.pause();
media.currentTime = 0;
//Just reload
media.load();
That should clear the buffer.