首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Javascript -播放声音和数组中的随机值

Javascript -播放声音和数组中的随机值
EN

Stack Overflow用户
提问于 2018-10-13 01:26:41
回答 1查看 466关注 0票数 0

我正在试着做一个随机问题的测验。我希望每个问题都伴随着一个声音剪辑,一旦问题显示,它就会自动播放。我也想有一个按钮,使用户可以重新播放的声音剪辑。我如何才能做到这一点呢?

我知道如何用audioClips.play();播放单独的音频剪辑。但是,如果播放来自数组的音频剪辑,与问题“同步”呢?

这就是我到目前为止所知道的:

代码语言:javascript
复制
var country = ["Italy", "Spain", "Portugal", "France", "Greece", "Ireland", "Germany"];
var audioClips = ["italy.mp3", "spain.mp3", "portugal.mp3", "france.mp3", "greece.mp3", "ireland.mp3", "germany.mp3"];
var capital = ["rome", "madrid", "lisbon", "paris", "athens", "dublin", "berlin"];
var random001 = Math.floor(Math.random() * country.length);

document.getElementById("country").textContent = country[random001];

function submit001() {
    var b = input001.value.toLowerCase();
    var text;
    if (b === capital[random001]) {
    goToNextQuestion();
        text = "Correct!";
    } else {
        text = input001.value.bold() + " is not correct!";
    }
    document.getElementById("input001").value = "";
    document.getElementById("answer001").innerHTML = text;
}

function goToNextQuestion() {
    document.getElementById("answer001").innerHTML = "";
    random001 = Math.floor(Math.random() * country.length);
    document.getElementById("country").innerHTML = country[random001];
    document.getElementById("input001").focus();
}
代码语言:javascript
复制
<p id="message001">What is the capital of <text id="country"></text>?</p>
    <input type="text" id="input001" autofocus onKeyDown="if(event.keyCode==13) submit001()">
<p id="answer001"></p>
<button onclick="playAudio()" type="button">Replay Audio</button>

EN

回答 1

Stack Overflow用户

发布于 2018-10-13 03:05:41

代码语言:javascript
复制
function playAudio() {
  // if you know how to play audio then follow these step
  //1. get file name from audioClips array at index randome001 like
  audioClip = audioClips[random001]
  // do whatever you need to do before playing audio like loading audio file or whatever
  //2. play audioClip.
}`
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52784387

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档