在音频播放时启动选框

Starting marquee on audio play

本文关键字：启动 音频 播放      更新时间：2023-09-26

我正在尝试找到一种方法来为html中的选框标签设置时间标签。整个想法是以选框格式显示歌曲的字幕，并且仅在用户单击以启动音频时才启动选框。

我正在使用以下代码播放音频文件（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完成此问题的解决方案？

我不确定您如何启动选框标签，但您应该等待 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 中的媒体元素交互的概述。

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);
}
相关文章：