你的位置:首页 > 软件开发 > 网页设计 > 用HTML5的Audio标签做一个歌词同步的效果

用HTML5的Audio标签做一个歌词同步的效果

发布时间:2016-03-16 12:00:07
HTML5出来这么久了,但是关于它里面的audio标签也就用过那么一次,当然还仅仅只是把这个标签插入到了页面中。这次呢就刚好趁着帮朋友做几个页面,拿这个audio标签来练练手。首先你需要向页面中插入一个audio标签,注意这里最好不要设置loop=loop,这个属性使用来设置 ...

用HTML5的Audio标签做一个歌词同步的效果

HTML5出来这么久了,但是关于它里面的audio标签也就用过那么一次,当然还仅仅只是把这个标签插入到了页面中。这次呢就刚好趁着帮朋友做几个页面,拿这个audio标签来练练手。

首先你需要向页面中插入一个audio标签,注意这里最好不要设置loop='loop',这个属性使用来设置循环播放的,因为到后面需要使用ended属性的时候,如果loop被设置为loop的话,ended属性将一直是false。

autoplay='autoplay'设置页面加载后自动播放音乐,preload和autoplay属性的作用是一样的,如果标签中出现了autoplay属性,那么preload属性将被忽略。

controls='controls'设置显示音乐的控制条。

<audio src='/images/loading.gif' data-original="music/Yesterday Once More.mp3" id="aud" autoplay="autoplay" controls="controls" preload="auto">  您的浏览器不支持audio属性,请更换浏览器在进行浏览。</audio>

 

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com

原标题:用HTML5的Audio标签做一个歌词同步的效果

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。