6

我正在尝试找到一种方法来为 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 完成此问题的解决方案？

4

2 回答 2

2

我不确定你如何开始你的字幕标签，但你应该等待play- 你的音频事件 - 元素这样做。当元素开始播放时，自动播放会触发此事件。

请注意，marquee不推荐使用 -tag，我会改用 css-transitions，它可以通过添加特定的 className 轻松触发。

给你的 media-Element 一个 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 中的媒体元素交互的概述。

于 2012-06-14T17:27:32.540 回答
1

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);
}
于 2012-06-14T17:28:14.940 回答