звук уведомления на html-странице с поддержкой браузера

Question

В настоящее время я пытаюсь создать анимацию со звуком уведомления на странице HTML!вот мой код HTML ...

<div id="audio-preload" style="display:none">
    <audio id="notificationOne" controls autoplay>
        <source src="assets/Sound/Notification_pitch.mp3" type="" />
    </audio>
</div>
<div class="preload" style="display:none">
    <img src="assets/Dai_v4/Dai_00001.png"/>
    <img src="assets/Dai_v4/Dai_00002.png"/>
    <img src="assets/Dai_v4/Dai_00003.png"/>
</div>

вот мой код js ...

$(document).ready(function() {
    (function() {
        function runmanLoad() {
            var num = 0;
            var speed = 50;
            var maxImgCount = 100;
            var $content = $(".running_man");
            var $man = $(".man");
            var $nitificationOne = $("#notificationOne");
            //do the man running after addclass
            $.when($content.addClass("active")).done(function() {
                $man.animate({ bottom: 0 }, 100); //1200 milisecond

                setInterval(function() {
                    num = num + 1;
                    //back to the first img
                    if (num >= 0 && num == maxImgCount) {
                        num = 1;
                    }
                    Number.prototype.pad = function(size) {
                        var s = String(this);
                        while (s.length < (size || 2)) {
                            s = "0" + s;
                        }
                        return s;
                    };
                    var masud = num.pad(4);
                    // console.log(masud);
                    //change the img url per 0.08sec
                    var newLInk1 = "assets/Dai_v4/Dai_0" + masud + ".png";
                    $man.css({ "background-image": "url(" + newLInk1 + ")" });
                    console.log(newLInk1);

                    // play audio sound one
                    function playAudioOne() {
                        $nitificationOne.get(0).play();
                    }




                    if (newLInk1 === "assets/Dai_v4/Dai_00060.png") {
                        playAudioOne();
                    }
                    if (newLInk1 >= "assets/Dai_v4/Dai_00061.png") {
                        $man.addClass("manik");
                    } else {
                        $man.removeClass("manik");
                    }
                }, speed);
            });
        }
        //window preload images
        function addLoadEvent(runmanLoad) {
            var oldonload = window.onload;
            if (typeof window.onload != "function") {
                window.onload = runmanLoad;
            } else {
                window.onload = function() {
                    if (oldonload) {
                        oldonload();
                    }
                    runmanLoad();
                };
            }
        }
        addLoadEvent(runmanLoad);
    })();
});

В основном этот код работает, когда я запускаю (кликаю) на странице HTML, в первый раз.в противном случае в консоли браузера отображается ошибка uncaught (в обещании) DOMException .Мой браузер обновлен!

В предварительная загрузка div изображения Я использую 100 изображений для этой анимации.ссылка на изображение соответственно assets / Dai_v4 / Dai_00000.png до assets / Dai_v4 / Dai_00100.png

, когда ссылка на изображение будет assets / Dai_v4 / Dai_00060.png тогда звук будет запущен!

это пример видео пример видео для анимации со звуком!