如何制作html5音频播放器同步歌词

如何制作html5音频播放器同步歌词,第1张

html5 audio 和 vedio 播放器歌词插件, 直接解析歌词源文件,

只需导入js文件 , 加入几句 js 代码即可, 默认至此歌词拖拽 ,

默认提供两个解析器, 俩个时间匹配函数。

<script type="text/javascript">

marqueesHeight=222

stopscroll=false

document.write('<div id="templayer" style="position:absolutez-index:1visibility:hidden"></div>')

preTop=0currentTop=0

function init(){

with(marquees){

style.height=marqueesHeight

style.overflowX="visible"

style.overflowY="hidden"

noWrap=true

onmouseover=new Function("stopscroll=true")

onmouseout=new Function("stopscroll=false")

}

templayer.innerHTML=""

while(templayer.offsetHeight<marqueesHeight){

templayer.innerHTML+=marquees.innerHTML

}

marquees.innerHTML=templayer.innerHTML+templayer.innerHTML

setInterval("scrollup()",50)//这里的数字是歌词滚动速度,根据需要填写

}

onload=init

function scrollup(){

if(stopscroll==true) return

preTop=marquees.scrollTop

marquees.scrollTop+=1

if(preTop==marquees.scrollTop){

marquees.scrollTop=templayer.offsetHeight-marqueesHeight

marquees.scrollTop+=1

}

}

</script>

<br />:

<div id="marquees">

滚动文字内容,就是你所说的歌词<br />

</div>


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/8374902.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-15
下一篇 2023-04-15

发表评论

登录后才能评论

评论列表(0条)

保存