在音频播放上开始选框

Question

我试图找到一种方法来设置时间标记到html中的marquee标记.整个想法是以字幕格式显示歌曲的字幕,并仅在用户点击以启动音频时启动字幕.

我使用以下代码播放音频文件,(在html-5中)

<audio controls="controls" loop="loop">
    <source src="song.ogg" type="audio/ogg" />
    <source src="song.mp3" type="audio/mpeg" />
    Your browser does not support the audio element.Please use chrome.
</audio>

我正在做的是在自动播放中设置此音频文件,并在页面加载时启动选取框(这是默认设置),但这在高速网络上运行良好,对于低速网络,出现的问题是音频内容的加载被延迟,因此字幕文本开始在音频之前运行.这不酷

请告诉我如何通过javascript完成此问题的解决方案？

Answer 1

我不确定您如何启动字幕标签，但您应该等待play- 音频事件 - 元素来执行此操作。当元素开始播放时，自动播放会触发此事件。

请注意，marquee-标签已被弃用，我将使用 css-transitions 代替，它可以通过添加特定的类名轻松触发启动。

为您的媒体元素提供一个 id，以便您可以使用 javascript 轻松访问它：

<audio id="audio" controls="controls" loop="loop">
    <source src="song.ogg" type="audio/ogg" />
    <source src="song.mp3" type="audio/mpeg" />
    Your browser does not support the audio element.Please use chrome.
</audio>

JavaScript 代码：

var audioEl = document.getElementById("audio");

audioEl.addEventListener('play',function(){
    //start your marquee in here
});

您可以在W3C 页面上找到媒体元素支持的所有事件以及事件触发时间的说明。这为您提供了有关如何在 javascript 中与媒体元素交互的概述。