【发布时间】：2018-01-09 17:17:27
【问题描述】：
我在 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);
}
};
有了这段代码，我得到了：
未处理的承诺拒绝：NotAllowedError（DOM 异常 35）： 用户代理或平台不允许请求 当前上下文，可能是因为用户拒绝了权限。
我在阅读并发现声音必须与点击等用户交互相关联。用户必须先点击开始秒表，然后开始倒计时。
我还发现了这个：https://www.sitepoint.com/community/t/count-down-and-make-sound-play-on-click/30270/2
但不知道我应该如何在我的代码中实现它。
【问题讨论】：
-
所以问题是你用代码播放mp3？
-
你能在你的 URL 中放一个例子吗：window.location.search？
-
你能更好地解释一下“我想在结束前 3 秒播放声音”吗？
标签： javascript jquery html audio