如何在html5中一个一个播放多个音频文件?
How to play multiple audio files one by one in html 5?
我想一个一个地播放多个音频文件。我已阅读相同的问题,但我发现原始答案的链接无效且问题未得到解答。
Original answer
<audio id="mySound" controls><source src="http://www.hvalur.org/audio/uploaded_files/ds_umkomuleysi_0_0.mp3" type="audio/mpeg"></audio>
<audio id="mySound1" ><source src="http://www.hvalur.org/audio/uploaded_files/ds_ljosmyndavel_0_0.mp3" type="audio/mpeg"></audio>
我希望用户操作(按下播放按钮)启动第一个声音,然后一个接一个地播放后面的声音。
这个例子的用法将练习理解母语者读出的电话号码。
我会这样做:
var mySound = document.getElementById("mySound");
var mySound1 = document.getElementById("mySound1");
var mySound2 = document.getElementById("mySound2");
var mySound3 = document.getElementById("mySound3");
var mySoundArray = [mySound, mySound1, mySound2, mySound3];
var mySoundArrayPos = 0;
var myButton = document.getElementById("myButton");
myButton.addEventListener("click", function(event) {
mySound.play();
mySoundArrayPos = 0;
startSoundTimer();
});
const startSoundTimer = () => {
var mySoundTimer = setInterval(() => {
if (mySoundArray[mySoundArrayPos].currentTime >= mySoundArray[mySoundArrayPos].duration) {
if (mySoundArrayPos < mySoundArray.length -1) {
mySoundArrayPos += 1;
mySoundArray[mySoundArrayPos].play();
} else {
clearInterval(mySoundTimer);
}
}
}, 10);
};
我不知道10ms是不是有点太快了,但我认为,这是合法的。
Javascript
=============== `playaudio(i) {
var thisme = this;
var audio = new Audio(thisme.model.audioFiles[i].audioUrl);
audio.play();
audio.addEventListener("ended", function () {
i = i + 1;
console.log(i);
if (i < thisme.model.audioFiles.length) {
audio.src = thisme.model.audioFiles[i].audioUrl;
audio.play();
}
}, false);
}
}`
HTML
====`<span class='chunkAudio' (click)="playaudio(0)">
<img class='playbtn' src="{{model.playerImageUrl}}" />
</span>`
我想一个一个地播放多个音频文件。我已阅读相同的问题,但我发现原始答案的链接无效且问题未得到解答。
Original answer
<audio id="mySound" controls><source src="http://www.hvalur.org/audio/uploaded_files/ds_umkomuleysi_0_0.mp3" type="audio/mpeg"></audio>
<audio id="mySound1" ><source src="http://www.hvalur.org/audio/uploaded_files/ds_ljosmyndavel_0_0.mp3" type="audio/mpeg"></audio>
我希望用户操作(按下播放按钮)启动第一个声音,然后一个接一个地播放后面的声音。 这个例子的用法将练习理解母语者读出的电话号码。
我会这样做:
var mySound = document.getElementById("mySound");
var mySound1 = document.getElementById("mySound1");
var mySound2 = document.getElementById("mySound2");
var mySound3 = document.getElementById("mySound3");
var mySoundArray = [mySound, mySound1, mySound2, mySound3];
var mySoundArrayPos = 0;
var myButton = document.getElementById("myButton");
myButton.addEventListener("click", function(event) {
mySound.play();
mySoundArrayPos = 0;
startSoundTimer();
});
const startSoundTimer = () => {
var mySoundTimer = setInterval(() => {
if (mySoundArray[mySoundArrayPos].currentTime >= mySoundArray[mySoundArrayPos].duration) {
if (mySoundArrayPos < mySoundArray.length -1) {
mySoundArrayPos += 1;
mySoundArray[mySoundArrayPos].play();
} else {
clearInterval(mySoundTimer);
}
}
}, 10);
};
我不知道10ms是不是有点太快了,但我认为,这是合法的。
Javascript
=============== `playaudio(i) {
var thisme = this;
var audio = new Audio(thisme.model.audioFiles[i].audioUrl);
audio.play();
audio.addEventListener("ended", function () {
i = i + 1;
console.log(i);
if (i < thisme.model.audioFiles.length) {
audio.src = thisme.model.audioFiles[i].audioUrl;
audio.play();
}
}, false);
}
}`
HTML
====`<span class='chunkAudio' (click)="playaudio(0)">
<img class='playbtn' src="{{model.playerImageUrl}}" />
</span>`