前言
最近自己写了个移动端音乐播放器,用了很多框架,也踩了很多坑,感觉比较复杂的就是计算歌词实时播放了,所以想着大概给整理了一下,分享出来,有问题的话朋友们可以指出,有需要的朋友们也可以学习学习。
布局
(歌词都是后台数据获取,方便理解我把所有歌词都一一列出来)
<section>
<figure>
<img id="animat" src="img/img3.jpg"/>
</figure>
<div class="lyric">
<div class="lrc-list">
<p data-play="audio-t-0" data-index="0">逃跑计划 </p>
<p data-play="audio-t-1" data-index="1">一万次悲伤 </p>
<p data-play="audio-t-2" data-index="2">oh honey </p>
<p data-play="audio-t-3" data-index="3">我脑海里全都是你 </p>
<p data-play="audio-t-8" data-index="4">oh无法抗拒的心情 </p>
<p data-play="audio-t-13" data-index="5">难以呼吸</p>
<p data-play="audio-t-15" data-index="6">tonight </p>
<p data-play="audio-t-17" data-index="7">是否又要错过一个夜晚</p>
<p data-play="audio-t-23" data-index="8">是否还要掩饰最后的期待 </p>
<p data-play="audio-t-29" data-index="9">oh tonight </p>
<p data-play="audio-t-30" data-index="10">一万次悲伤 </p>
<p data-play="audio-t-33" data-index="11">依然会有意义</p>
<p data-play="audio-t-35" data-index="12">我一直在最温暖的地方等你</p>
<p data-play="audio-t-40" data-index="13">似乎只能这样停留一个方向</p>
<p data-play="audio-t-46" data-index="14">已不能改变</p>
<p data-play="audio-t-51" data-index="15">每一颗眼泪是遗忘的光 </p>
<p data-play="audio-t-57" data-index="16">最昏暗的地方也变得明亮</p>
<p data-play="audio-t-61" data-index="17">我奔涌的暖流寻找你的海洋 </p>
<p data-play="audio-t-67" data-index="18">我注定这样</p>
<p data-play="audio-t-73" data-index="19">oh honey </p>
<p data-play="audio-t-75" data-index="20">你目光里充满忧郁 </p>
<p data-play="audio-t-81" data-index="21">就像经历一遍飞行难以逃避</p>
<p data-play="audio-t-87" data-index="22">tonight </p>
<p data-play="audio-t-89" data-index="23">是否还要错过这个夜晚</p>
<p data-play="audio-t-91" data-index="24">是否还要熄灭所有的期待</p>
<p data-play="audio-t-95" data-index="25">tonight</p>
<p data-play="audio-t-100" data-index="26">一万次悲伤</p>
<p data-play="audio-t-102" data-index="27">依然会有意义</p>










