我在 HTML 页面中插入了一首诗文本。这首诗的每一节都被插入到一个 div 中,其 id 与该节的编号相对应。
我的愿望如下:
每个诗句都有一个匹配的音频文件,当用户单击播放按钮时,播放开始,相应诗句的音频也会播放,背景颜色也会发生变化以显示当前诗句。此外,当前诗句 div 必须滚动到窗口顶部。
下面的 JavaScript 代码无法按预期工作,它会更改所有 div 的颜色并且无法正确播放声音。
function lecture() {
var nbDivs = 28;
for (i = 1; i <= nbDivs.length; i++) {
location.href = '#'+i;
var div = document.getElementById(i);
div.style.backgroundColor = 'green';
var audio = new Audio(i + '.mp3');
audio.play();
}
}
对于 HTML 代码,诗句位于分隔的 div 元素中,并以诗句编号作为 id。
这就是我到目前为止所做的,但不起作用。
有什么想法可以用 javascript 或 Angular2 来实现吗
最佳答案
我建议建立一个时间映射,您可以在其中指定哪条线在哪个时间开始。之后,您可以简单地查找相应的 div 元素并将其移至顶部或隐藏所有先前的元素。
关于javascript - 将文本与音频文件同步,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44352845/