I have a question on audio / video playing for mobile devices without user interaction (touch events)?
How to play the audio / video file without touch events? On googling I had found that
In ipad device browsers, Safari 4+ above versions are able to play the audio / video file with user interactions only. But I need to play the audio / video files without user interactions in latest versions.
Is it possible to play the video and audio file with single click operation?
For more details:
Example:
In device browsers (ios /android) we are loading a html page. Here, Html page loads the video files,audio files. User can play few user interactive operations on the html page. When user perform operations parallely audio files will played based on the selection of operation. To resolve the issue,let us know any approaches.
Related
I'm maintaining a legacy ASP/VBScript application for some warehouse scanners. They run Android 7 with Chrome 64. I can configure Chrome however I want so I'm not constrained like a normal website would be. Due to the nature of this web application, playing a sound on page load would improve usability (when the submitted action fails). Is there any way to allow an audio file to play on page load?
I can play sounds easily after a user interaction. However, I've tried multiple methods to play a sound on page load without success:
An <audio> tag with autoplay does not play (<audio autoplay="">).
Play the sound during the load event (Audio.play()). The returned Promise fails with the error:
NotAllowedError: play() can only be initiated by a user gesture.
Create an Audio with autoplay, and append it to body during the load event.
Create an Audio, append it to body, and .play() it during the load event. Yields the same "NotAllowedError".
Whitelisting the website for sounds in Chrome.
Ensuring the media autoplay setting is set to allowed in Chrome.
Both Chrome and Firefox, have dropped support for the autoplay attribute for both audio and video unless it's a video with the sound muted.
You can read more on that here: Autoplay Policy
However, recently I found a workaround using the Howler.js library, and it seems to work quite well in just these lines of code:
let timer, sound;
sound = new Howl({
src: ['<?= get_theme_file_uri() ?>/images/spotAudio.mp3']
});
sound.play();
You can download the library and read the docs here: https://howlerjs.com/
To enable the autoplay of a video we just add the "autoplay" attribute to the video tag.
This doesn't work on mobile devices and browsers like Google Chrome, iPad, iPhone, the "play" method will not work until there is no user interaction with the touchscreen.
But in this link or this link, with a custom JavaScript player, they bypass this block, and the video autoplay on iPhone, iPad, Webkit Browsers and all Mobile Devices without user interaction.
How can i do it myself?
if at the load of the page i simulate touch events this might unlock the video "play" method?
i cloud load a video url only with canvas? without the video tag?
Please help and explain me.
There's a library which uses canvas to autoplay inline video on mobile. The downside is that there is no audio, since canvas originally wasn't intended for that.
The library basically loads all the frames and then shows them to you in a sequence. This brings along some limitations regarding the length of the video.
Beats gifs tho....
https://github.com/gka/canvid
I've got a quick n dirty trial here,
<body>
TEST
<audio src="preview1.mp3" id="audio"></audio>
</body>
Then in my javascript console on desktop, I do the following:
var audio = document.getElementById('audio');
audio.play(); // the first audio plays just fine!
audio.pause();
audio.src = 'preview2.mp3';
audio.play(); // the second audio plays fine, too!
However, when I do the exact same thing on any mobile device (specifically iOS and Android devices are the ones that I've tried), absolutely nothing happens. No audio plays at all.
I've done a ton of searching online but it doesn't seem to be the case for anybody else?
Thoughts?
If you are having trouble with your audio player, please note that in Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled by the iOS. No data is loaded until the user initiates it. This means that the audio player is inactive until the user initiates playback by clicking on the play button.
For Android devices:
Chrome does not allow applications to play HTML5 audio without an explicit action by the user, similar to how it is handled by iOS, but differently than how the stock Android browser handles it.
Reference: http://www.wix.com/support/html5/technical-difficulties/browser-compatibility/faq/my-video-is-not-playing-on-my
I am using cordova 3 and building app for ios.
I'm streaming audio channel using html5 audio player. Now as it has no stop function, so I had to change the source of the player to an invalid stream address to stop player both streaming and loading.
Before this stop mechanism, when I use the pause functionality the player kept loading the stream. That unacceptable. Because I don't want the user to waste bandwidth when the player is in pause mode. So the idea worked of that invalid addres. But when I set the address the player shows
cannot play audio file
I want to show
please select a channel
Is there any way to replace this text as I want to?? I tried
document.getElementById('myaudio').text="Plese select a channel";
It's not working. Player still shows cannot play audio file
How to achive this functionality?
Is there a way I can play a sound each time a click is made using ZeroClipboard?
I have a custom sound made that I want to play on those events.
PS. I can't use an <embed> here because I don't want the ugly "allow this page to play with quicktime" alerts that the browser will throw. Is there a way I can put in my sound in ZeroClipboard?
You have two options as i see it.
1. you can create a html5 audio player that plays a sound on the click event
2. you can create a flash file that houses a mp3 player. using flashvars you can send events to flash telling it to play the sound. the benefit of this is true cross browser compatibility (if your worried about this). this is essentially how the web experience of grooveshark and rdio operate. (mainly because of the html5 audio vulnerability)