需要帮助将音频附加到警报框答案

【问题标题】：Need assistance for attaching audio to alert box需要帮助将音频附加到警报框
【发布时间】：2018-03-28 03:59:06
【问题描述】：

我正在为一个艺术装置制作一个网站，展示计算机如何与人类互动，并且在某些方面看起来像人类。为此，我需要按特定顺序发出警报。将音频附加到正在显示的特定警报。我总共将有超过 5 个警报，带有 5 个 wav。这是语音文件读取警报框将要说的内容。

我已经为此工作了好几个小时，并且对正确思考感到沮丧。我根本不懂javascript，所以请，任何建议都超出了我对这种语言的了解。

<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<script>
 var audio = new Audio('Images/hellllloooo.wav');
        audio.oncanplay  = function() {
            audio.play();
            alert("Hello?");
        };

        </script>
        <script>

    var audio = new Audio('Images/sorry.wav?.wav?.wav');
        audio.oncanplay  = function() {
            audio.play();
            alert("sorry?");
        };
        </script>
</body>
</html>

【问题讨论】：

你当前的代码是做什么的？哦，我明白了，因为您正在使用 oncanplay 使代码异步
alert 对用户非常不友好（而且 blocks 也是如此），你确定这是你想要的吗？
我希望它非常不友好
当前代码显示两个警报，而只播放第二个音频的第一个音频
如何将音频部分连接到警报部分并将它们保持在一起哈哈

标签： javascript html audio alert attachment

【解决方案1】：

您的示例最简单的解决方案是“嵌套”这两位代码，以便第二个警报等待第一个警报

var audio = new Audio('Images/hellllloooo.wav');
audio.oncanplay  = function() {
    audio.play();
    alert("Hello?");
    var audio2 = new Audio('Images/sorry.wav?.wav?.wav');
    audio2.oncanplay  = function() {
        audio2.play();
        alert("sorry?");
    };
};

当然，这样做，嵌套在大约 2 之后会变得混乱，而你想要 5

所以，我建议使用 Promises

function playAlert(msg, wav) {
    return new Promise(function(resolve) {
        var audio = new Audio(wav);
        audio.addEventListener('canplay', function(e) {
            audio.play();
            alert(msg);
            resolve();
        });
    });
}
playAlert("Hello?", 'Images/hellllloooo.wav')
.then(function() {
    return playAlert("sorry?", 'Images/sorry.wav?.wav?.wav');
})
.then(function() {
    return playAlert("another message", 'Images/another.wav');
})
.then(function() {
    return playAlert("fourth message", 'Images/fourth.wav');
})
.then(function() {
    return playAlert("fifth message", 'Images/fifth.wav');
});

现代javascript中的以上

const playAlert = (msg, wav) => new Promise(resolve => new Audio(wav).addEventListener('canplay', function(e) {
    this.play();
    alert(msg);
    resolve();
}));

playAlert("Hello?", 'Images/hellllloooo.wav')
.then(() => playAlert("sorry?", 'Images/sorry.wav?.wav?.wav'))
.then(() => playAlert("another message", 'Images/another.wav'))
.then(() => playAlert("fourth message", 'Images/fourth.wav'))
.then(() => playAlert("fifth message", 'Images/fifth.wav'));

甚至

[
    {"Hello?", 'Images/hellllloooo.wav'},
    {"sorry?", 'Images/sorry.wav?.wav?.wav'},
    {"another message", 'Images/another.wav'},
    {"fourth message", 'Images/fourth.wav'},
    {"fifth message", 'Images/fifth.wav'}
].reduce((p, {msg, wav}) => p.then(() => new Promise(resolve => new Audio(wav).addEventListener('canplay', function(e) {
    this.play();
    alert(msg);
    resolve();
})), Promise.resolve());

【讨论】：

有没有办法让它成为 var timeoutID;？
什么var timeoutID？我看不到有关超时的问题
如何延迟警报的出现？不是让它们首先出现在页面中，而是如何向它们插入超时？
我猜是使用 settimeout
有一个新问题，其中有一些有用的答案实际上涵盖了这个问题 - stackoverflow.com/questions/49569310/…