mgtv - 素材

当前位置:Gxlcms > 播放器 > jQuery歌词同步MP3播放器代码

jQuery歌词同步MP3播放器代码

时间:2021-07-01 10:21:17 帮助过:0人阅读

jQuery歌词同步MP3播放器代码 jQuery歌词同步MP3播放器代码是一款基于APlayer.js插件实现的歌词同步MP3音乐播放器特效。
<head>
<meta charset="UTF-8">
<title>jQuery歌词同步MP3播放器代码 - mgtv素材</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="dist/APlayer.min.css">
<style>
body{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;}.container{max-width:32rem;margin-left:auto;margin-right:auto;}h1{font-size:54px;color:#333;margin:30px 0 10px;}h2{font-size:22px;color:#555;}h3{font-size:24px;color:#555;}hr{display:block;width:7rem;height:1px;margin:2.5rem 0;background-color:#eee;border:0;}a{color:#08c;text-decoration:none;}p{font-size:18px;}
</style>
</head>
<body>
<div class="container">
<h1>APlayer</h1>
<div id="player3" class="aplayer">
<pre class="aplayer-lrc-content">
[ti:平凡之路]
[ar:朴树]
[al:《后会无期》主题歌]
[by:周敏]

[00:00.00]平凡之路 - 朴树
[00:04.01]作词:韩寒 朴树
[00:08.02]作曲:朴树 编曲:朴树
[00:12.02]徘徊着的 在路上的
[00:17.37]你要走吗
[00:23.20]易碎的 骄傲着
[00:28.75]那也曾是我的模样
[00:34.55]沸腾着的 不安着的
[00:40.26]你要去哪
[00:46.00]谜一样的 沉默着的
[00:51.75]故事你真的在听吗
[00:56.25]我曾经跨过山和大海
[00:59.55]也穿过人山人海
[01:02.70]我曾经拥有着一切
[01:05.00]转眼都飘散如烟
[01:07.75]我曾经失落失望失掉所有方向
[01:13.46]直到看见平凡才是唯一的答案
[01:31.70]当你仍然
[01:33.10]还在幻想
[01:37.40]你的明天
[01:43.00]她会好吗 还是更烂
[01:49.78]对我而言是另一天
[01:53.33]我曾经毁了我的一切
[01:56.54]只想永远地离开
[01:59.82]我曾经堕入无边黑暗
[02:02.14]想挣扎无法自拔
[02:04.79]我曾经像你像他像那野草野花
[02:10.54]绝望着 渴望着
[02:13.54]也哭也笑平凡着
[03:03.38]向前走 就这么走
[03:06.23]就算你被给过什么
[03:09.08]向前走 就这么走
[03:11.83]就算你被夺走什么
[03:14.78]向前走 就这么走
[03:17.58]就算你会错过什么
[03:20.33]向前走 就这么走
[03:23.13]就算你会
[03:25.78]我曾经跨过山和大海
[03:28.14]也穿过人山人海
[03:30.44]我曾经拥有着一切
[03:33.69]转眼都飘散如烟
[03:36.24]我曾经失落失望失掉所有方向
[03:42.04]直到看见平凡才是唯一的答案
[03:47.69]我曾经毁了我的一切
[03:50.84]只想永远地离开
[03:53.39]我曾经堕入无边黑暗
[03:56.29]想挣扎无法自拔
[03:59.04]我曾经像你像他像那野草野花
[04:04.79]绝望着 渴望着 也哭也笑平凡着
[04:10.64]我曾经跨过山和大海
[04:13.54]也穿过人山人海
[04:16.14]我曾经问遍整个世界
[04:19.49]从来没得到答案
[04:22.88]我不过像你像他像那野草野花
[04:27.64]冥冥中这是我 唯一要走的路啊
[04:34.65]时间无言
[04:36.15]如此这般
[04:40.30]明天已在眼前
[04:46.45]风吹过的 路依然远
[04:51.55]你的故事讲到了哪
</pre>
</div>
  <h3>Wide style</h3>
  <div id="player1" class="aplayer"></div>
  <h3>Narrow style</h3>
  <div id="player2" class="aplayer"></div>
</div>
<script src="dist/APlayer.min.js"></script> 
<script>
    var ap1 = new APlayer({
        element: document.getElementById('player1'),
        narrow: false,
        autoplay: false,
        showlrc: false,
        music: {
            title: 'Sugar',
            author: 'Maroon 5',
            url: 'music/Sugar.mp3',
            pic: 'music/Maroon5.jpg'
        }
    });
    ap1.init();
	
    var ap2 = new APlayer({
        element: document.getElementById('player2'),
        narrow: true,
        autoplay: false,
        showlrc: false,
        music: {
            title: 'Sugar',
            author: 'Maroon 5',
            url: 'music/Sugar.mp3',
            pic: 'music/Maroon5.jpg'
        }
    });
    ap2.init();
	
    var ap3 = new APlayer({
        element: document.getElementById('player3'),
        narrow: false,
        autoplay: false,
        showlrc: true,
        music: {
            title: '平凡之路',
            author: '朴树',
            url: 'music/Sugar.mp3',
            pic: 'music/pf.jpg'
        }
    });
    ap3.init();
</script>


</body>