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

我不确定你是如何开始使用marquee-tag的，但是你应该等待音频元素的play - 事件。当元素开始播放时，自动播放会触发此事件。

请注意，marquee - 标签已弃用，我会使用css-transitions，可以通过添加特定的className轻松触发。

为您的媒体元素添加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-Page上找到媒体元素支持的所有事件，并说明何时触发它们。这将为您提供有关如何在javascript中与媒体元素进行交互的概述。

Answer 2

http://jsfiddle.net/kykMs/1/

最初将您的歌曲标题放在span中：

<span id="song">Artist - Song Title</span>

然后在页面加载时将其替换为marquee：

window.onload = function() {
    var elem = document.getElementById("song");

    var marq = document.createElement('marquee');
    marq.innerHTML = elem.innerHTML;

    document.getElementById("player").removeChild(elem);
    document.getElementById("player").appendChild(marq);
}

在音频播放上开始选框

2 个答案: