Sign in
Log inSign up

Autoplay Background HTML5 Sound/Video on Android and iOS?

Ivijan (Stefan) Stipic's photo
Ivijan (Stefan) Stipic
·Jul 28, 2017

First here is my code:

(function(a,n){
        window.onload = function() {
            var b = document.body,
                userAgent = navigator.userAgent || navigator.vendor || window.opera,
                playSound = function(file) {
                    var mediaAudio = new Audio(file);
                    mediaAudio.play();
                };
            if(b.id == 'fail' || b.id == 'success')
            {
                if ((/android/gi.test(userAgent) && !window.MSStream))
                {
                    var vm = document.createElement("video"), type;
                    vm.autoPlay = false;
                    vm.controls = true;
                    vm.preload = 'auto';
                    vm.loop = false;
                    vm.muted = true;
                    vm.style.position = 'absolute';
                    vm.style.top = '-9999%';
                    vm.style.left = '-9999%';
                    vm.style.zIndex = '-1';
                    vm.id = 'video';

                    if(b.id == 'fail')
                        type = a;
                    else
                        type = n;

                    for(key in type)
                    {
                        if(/video/gi.test(key) && vm.canPlayType(key) == 'probably') {
                            vm.type = key;
                            vm.src = type[key];
                            b.appendChild(vm);
                            setTimeout(function(){
                                vm.muted = false;
                                vm.play();
                            },100);
                            return;
                        }
                    }
                }
                else
                {
                    var au = new Audio(),type;
                    if(b.id == 'fail')
                        type = a;
                    else
                        type = n;
                    for(key in type)
                    {
                        if(/audio/gi.test(key) && au.canPlayType(key) == "probably") {
                            playSound(type[key]);
                            return;
                        }
                    }
                }
            }
        }
    }({
        'audio/mpeg':'./sfx/not_ok.mp3',
        'audio/wav':'./sfx/not_ok.wav',
        'audio/ogg':'./sfx/not_ok.ogg',
        'video/mp4; codecs=avc1.42E01E,mp4a.40.2':'./sfx/not_ok.mp4',
    },
    {
        'audio/mpeg':'./sfx/ok.mp3',
        'audio/wav':'./sfx/ok.wav',
        'audio/ogg':'./sfx/ok.ogg',
        'video/mp4; codecs=avc1.42E01E,mp4a.40.2':'./sfx/ok.mp4',
    }));

I'm trying to play background sound on all devices on one special page. That page play fail or success sound.

All works great on desktop browsers but when I try to play on mobile, I not get results. In that code you see above, I add one hack where I on android platform generate hidden video and trying to autoplay but not have success.

Is there a way how I can trigger play for video or audio automaticaly?

Is there a way to emulate some click event on body to automaticaly play sound on click event or some other solution?

8