如何触发另一个函数内部的函数

Question

我设置了每秒运行一次的函数(for clock)
我想在每个滴答滴答....(秒)中添加声音，但由于功能是自动运行的(意味着没有触发正在发生)，当添加的声音产生错误

错误显示为:
未捕获DOMException: play()失败，因为用户没有首先与文档交互。

要知道自动播放音频是不可能的。

所以尝试创建一个start声音btn，它播放audio，但作为第二次(时钟)，与音频不匹配。所以这里有不匹配

我正在尝试添加功能(音频播放)内秒(时钟时间)计算器
这是可能的还是不

链接到类似问题但无法找到解决方案

代码如下

setInterval(clockRunner, 1000);
function clockRunner() {
//Clock code goes here
function trigger() {
var audioElement = document.getElementById('audiotag1');
audioElement.play();
}
}

<audio id="audiotag1" src="https://soundbible.com/mp3/Tick-DeepFrozenApps-397275646.mp3" preload="metadata" controls></audio>
<button onclick="trigger()">Start</button>

更新在外部function中添加了事件监听器，但这种方式声音播放一次，而不是每秒

这里的一个解决方案可以添加另一个setInterval，但这将再次产生在时钟秒的不同时间播放声音的问题

在用户单击btn之前，它还会在控制台中显示相同的错误(如上所述)

setInterval(clockRunner, 1000);
function clockRunner() {
//Clock code goes here
document.getElementById('demo').innerHTML = new Date();
setInterval(trigger, 1000);
document.getElementById("triggerSnd").addEventListener('click', trigger)
function trigger() {
var audioElement = document.getElementById('audiotag1');
audioElement.play();
}
}

<audio id="audiotag1" src="https://soundbible.com/mp3/Tick-DeepFrozenApps-397275646.mp3" preload="metadata" controls></audio>
<button id="triggerSnd">Start</button>
<div id="demo"></div>

谢谢提前帮助

Answer 1

如果您使用一些变量，您可以控制您的代码像时钟一样执行。值得注意的是，有两种可能性，要么时钟已经启动，要么它已经停止。

间隔将运行，当你点击开始，它将被清除在停止它。在这里，我没有注意到声音和计时器之间的任何不匹配。

var start = document.getElementById("triggerSnd")
var audioElement = document.getElementById('audiotag1')
var demo = document.getElementById('demo')
var interval, isMuted = true
// The second argument of addEventListener should be a function
// that receives an argument 'event'
clockRunner();
clock(); // call firstly
setInterval(() => clock(), 1000)

start.addEventListener('click', clockRunner)
function clock(isMuted){
//Clock code goes here
demo.innerText = new Date();
audioElement.play();
}
function clockRunner() {
audioElement.muted = isMuted
start.innerText = isMuted ? "Start" : "Stop"
isMuted = !isMuted
}

<audio id="audiotag1" src="https://soundbible.com/mp3/Tick-DeepFrozenApps-397275646.mp3" preload="metadata"></audio>
<button id="triggerSnd">Start</button>
<div id="demo"></div>

Answer 2

我已经完全改变了我的答案。现在我不需要使用事件监听器，只需要audio使用的适当的HTMLMediaElement API。请注意，我已经为tick的音频添加了loop属性。

var blast = document.getElementById("blast");
var tick = document.getElementById("tick");
var tickDuration, timeDiff, lastTime

tick.onloadedmetadata = () => tickDuration = tick.duration

timeDiff = 0.3 // max difference between sync, dont lower it or it will bug (can explain if u want)
lastTime = 0
blast.addEventListener("timeupdate", () => {
let bct = blast.currentTime
let tct = tick.currentTime
let syncBlastTime = tickDuration - (tickDuration - bct%tickDuration)
let diff = Math.abs(syncBlastTime - tct)
lastTime = bct

console.log(`Blast: ${bct} Tick: ${tct}nSynced time difference (seconds): ${diff.toFixed(6)}`)
if(diff > timeDiff) { // add this or it will bug the tick audio
tick.currentTime = syncBlastTime
}  
})
blast.addEventListener("pause", () => {
tick.pause()
})
blast.addEventListener("playing", () => {
tick.play()
})

<audio id="blast" src="http://stream.arrowcaz.nl/caz64kmp3" controls="loop"></audio>
<audio id="tick" src="https://soundbible.com/mp3/A-Z_Vocalized-Mike_Koenig-197996831.mp3" loop controls='loop'></audio>
<br />