Javascript延迟后播放声音

Question

我用 JavaScript 制作了一个秒表，它接受来自 get 参数的开始时间。一切正常，但我想在结束前 3 秒播放声音。到目前为止我有这个:

HTML:

<form action="timer.php" method="get">
    <select name="hours">
        <?php for($i = 0; $i <= 24; $i++): ?>
            <option value="<?php echo $i; ?>"><?php echo $i; ?></option>
        <?php endfor; ?>
    </select>
    <select name="minutes">
        <?php for($i = 0; $i <= 59; $i++): ?>
            <option value="<?php echo $i; ?>"><?php echo $i; ?></option>
        <?php endfor; ?>
    </select>
    <select name="seconds">
        <?php for($i = 0; $i <= 59; $i++): ?>
            <option value="<?php echo $i; ?>"><?php echo $i; ?></option>
        <?php endfor; ?>
    </select>
    <input type="submit" name="submit" value="submit">
</form>

<div class="stopwatch">
    <a href="javascript:;" class="start-stopwatch">Start stopwatch</a><br>
    <a href="javascript:;" class="stop-stopwatch">Stop stopwatch</a><br>
    <span class="hours"></span>:<span class="minutes"></span>:<span class="seconds"></span>
</div>

Javasciprt:

// GetParams class to parse $_GET[]
    var GetParams = {
        getSearchParameters: function() {
            var prmstr = window.location.search.substr(1);
            return prmstr != null && prmstr != "" ? this.transformToAssocArray(prmstr) : {};
        },

        transformToAssocArray: function( prmstr ) {
            var params = {};
            var prmarr = prmstr.split("&");
            for ( var i = 0; i < prmarr.length; i++) {
                var tmparr = prmarr[i].split("=");
                params[tmparr[0]] = tmparr[1];
            }
            return params;
        }
    };

    var stopWatch = {
        TimerID : null,
        startHours   : parseInt(GetParams.getSearchParameters().hours),
        startMinutes : parseInt(GetParams.getSearchParameters().minutes),
        startSeconds : parseInt(GetParams.getSearchParameters().seconds),
        totalSeconds : parseInt(GetParams.getSearchParameters().seconds) + parseInt(GetParams.getSearchParameters().minutes) * 60 + parseInt(GetParams.getSearchParameters().hours) * 3600,

        changeTimer: function () {
            this.TimerID = setInterval(() => this.timerTick(), 1000);
            $('.start-stopwatch').hide();
        },

        timerTick: function ()
        {
            this.totalSeconds--;
            var hours   = Math.floor(this.totalSeconds / 3600);
            var minutes = Math.floor(this.totalSeconds / 60) - (hours * 60);
            var seconds = this.totalSeconds - (minutes * 60) - (hours * 3600);

            if (hours < 10)
                hours = "0" + hours;

            if (minutes < 10)
                minutes = "0" + minutes;

            if (seconds < 10)
                seconds = "0" + seconds;

            $('.stopwatch .hours').text(hours);
            $('.stopwatch .minutes').text(minutes);
            $('.stopwatch .seconds').text(seconds);

            if (this.totalSeconds === 0)
            {
                clearInterval(this.TimerID);
                new Audio("/sources/sounds/interval.mp3").play();
            }
        },

        isActive: function () {
            return (this.totalSeconds > 0);
        },

        prePopulate: function () {
            var hours   = this.startHours;
            var minutes = this.startMinutes;
            var seconds = this.startSeconds;

            if (hours < 10)
                hours = "0" + hours;

            if (minutes < 10)
                minutes = "0" + minutes;

            if (seconds < 10)
                seconds = "0" + seconds;

            $('.stopwatch .hours').text(hours);
            $('.stopwatch .minutes').text(minutes);
            $('.stopwatch .seconds').text(seconds);
        },

        stopTimer: function () {
            $('.start-stopwatch').show();
            clearInterval(this.TimerID);
        }
    };

通过这段代码我得到:

Unhandled Promise Rejection: NotAllowedError (DOM Exception 35): The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

我在阅读时发现声音必须与用户交互(例如点击)相关联。用户必须先单击“开始秒表”，然后才开始倒计时。

我还发现了这个:https://www.sitepoint.com/community/t/count-down-and-make-sound-play-on-click/30270/2

但不知道如何在我的代码中实现它。

Answer 1

我知道您可以使用 click() 函数自动单击某些内容。

假设你有一个 html

<button id="mybtn"></button>

您可以通过执行以下操作使用 JS 单击该内容:

var mybtn = document.getElementById('mybtn');
mybtn.click();
Hopefully that helps!!