I need to e2e test sound autoPlay. Is that possible to setup puppeteer in the way it allows autoPlay?
I understand that sound will not be played, but HTMLAudioElement acts like playing if I clickbon the play button, I need the same thing but with autoPlay
You will need to launch chrome with --autoplay-policy=no-user-gesture-required launch flag.
Autoplay policy that does not require any user gesture.
It applies both for video and audio sources.
E.g.
await puppeteer.launch({ headless: false, args: ['--autoplay-policy=no-user-gesture-required'] })
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
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.
As we know for an HTML5 video, "Playback will start automatically for a video element once it comes into view if both autoplay and muted are set"
Also "It's possible to unmute a video programmatically in response to a user gesture such as a click, but if you attempt to unmute a video programmatically without a user gesture, playback will pause."
Hence for a video calling app, If I want an autoplay of the remote videos, I have to keep them muted until there is a user gesture. This kills the user experience. Kindly help how to manage autoplay of remote video in unmuted state for voice. I am testing with Safari in iOS 11.2
see https://webkit.org/blog/7763/a-closer-look-into-webrtc/ in the section "Media Capture and Autoplay Video" -- if you are capturing from getUserMedia you are probably good.
https://github.com/webrtc/samples/issues/929 has some notes on useful properties you might want to set.
I have used the audio-tag HTML element to try to play audio at
Example of Audio Issue: www.justinreina.com/nice_try
Using the following HTML
<audio autoplay>
<source src="justinsingsbetter.wav" type="audio/wav">
</audio>
It works fine in a Desktop Web Browser (e.g. Firefox) but the audio does not play on an iPhone (iPhone 6, IOS 9.1). Why is this not working, and does anyone have any suggestions to fix it?
Mobile Safari does not support autoloading of audio.
More specifically mobile Safari ignores the following automatically:
the autoplay attribute
the preload attribute
audio.play() in a method that runs on page load
Audio streams can only be loaded when triggered by a user touch event such as onmousedown, onmouseup, onclick, or ontouchstart.
As of now there is no workaround to it. Before iOS 4.2.1 you were able to load an audio file from the callback of a synchronous Ajax call . This was patched in iOS 4.2.1 since the synchronous call would lock the whole browser and if an error occurred while loading the file the whole browser would remain locked and have to be force closed.
Source: http://www.ibm.com/developerworks/library/wa-ioshtml5/
I have a website which is using a media fragment on a html5 video. This video is set to autoplay and loop (not my choice). I'm concerned about the performance impact of this.
<video autoplay loop>
<source src="http://example.com/video.mp4#t=10,20">
</video>
When viewing the network panel in chrome it seems to make a new resource for each loop of the video and the requests and MB transferred keeps going up... forever :(
Anyone know the performance impact of this and whether is actually downloading the fragment of video each time. Would this bypass the cache as it's a new resource?
This happens because you have the disable cache setting ticked in the network tab. If you disable this then it only loads the video once, rather than reloading at the end of each loop.
I thought the same thing recently when doing some optimization.