Question

我的服务员名单上有一个声音列表：

sound1.mp3， sound2.mp3， sound3.mp3 ...

我还有一张名为的照片列表：的 image1.jpg， image2.jpg， image3.jpg ...

我想在点击image1.jpg时播放sound1.mp3，按下image2.jpg等时的sound2.mp3等。

我对javascript不是很擅长，而且我在引用“”和“...”

时也很挣扎

<script>
function playSound(){
    for (i = 1; i < 4; i++) { 
        '<audio id="sound' + i +'" src="mywebsite/sound'+ i + '.mp3"></audio>'
        '<img src="mywebsite/image' + i + '.jpg" onclick="document.getElementById("sound"\i"\").play()"/>';
}
}
playSound();
</script>

非常感谢任何帮助...... !!!

Answer 1

您可以使用以下内容开始播放单个文件：

var audio = new Audio('audio_file.mp3');
audio.play();

如果您想播放连续的文件，则需要捕获ended事件，如下所示：

function playFirstTwoFiles() {
    var audio = new Audio('audio_file.mp3');
    audio.addEventListener("ended", playSecondFile, true);
    audio.play();
}

function playSecondFile() {
    var audio = new Audio('audio_file_2.mp3');
    audio.play();
}

Answer 2

运行下面的代码段并按照您的预期检查控制台html字符串。

function playSound(){
   var htmltoappend = "";
    for (i = 1; i < 4; i++) { 
       htmltoappend += '<audio id="sound' + i +'" src="mywebsite/sound'+ i + '.mp3"></audio>'
         htmltoappend += '<img src="mywebsite/image' + i + '.jpg" onclick="document.getElementById("sound'+i+'").play()"/>';
}
  console.log(htmltoappend);
}
playSound();

Answer 3

按如下方式重构第5行

'<img src="mywebsite/image' + i + '.jpg" onclick="document.getElementById("sound' + i + '").play()"/>'

For Loop在javascript中播放声音

3 个答案: