APlayer帶歌詞音樂播放器插件



90 358 120



特效描述:APlayer 帶歌詞音樂播放器,html5 APlayer.js制作帶歌詞的小型音樂播放器,支持歌詞滾動演示、帶播放進度條和聲音控制、暫停播放等功能。

代碼結構

1. 引入CSS

<link rel="stylesheet" href="APlayer.min.css">
<link rel="stylesheet" type="text/css" href="index.css">

2. 引入JS

<script src="APlayer.min.js"></script>

3. HTML代碼

<div id="header">
</div>
<div id="main">
	<div class="demo">
		<p><strong>MY MUSIC</strong></p>
        <div id="player3" class="aplayer">
            <pre class="aplayer-lrc-content">
                [00:00.00]Jar Of Love
[00:00.08]演唱:曲婉婷
[00:00.22]
[00:01.00]Another sunrise, another sunset
[00:05.10]Soon it'll all be yesterday
[00:08.33]Another good day, another bad day,
[00:12.77]What did you do today?
[00:15.95]Why do we choose to chase what we'll lose?
[00:19.77]What you want isn't what you have.
[00:23.34]What you have may not be yours, to keep.
[00:31.29]If I could find love, at a stop, in a park with open arms,
            </pre>
        </div>
	</div>
</div>
    <script>
        var ap3 = new APlayer({
            element: document.getElementById('player3'),//樣式1
            narrow: false,
            autoplay: false,
            showlrc: true,
            music: {
                title: 'Jar Of Love',
                author: '_Re-夢_',
                url: 'aa.mp3',
                pic: 'zz.jpg'
            }
        });
        ap3.init();
    </script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 自動滾動圖片輪播 滑動星星打分 切換按鈕 表單 表單美化 表單插件 表單美化插件 其他 文字滾動 文字無縫滾動 文字間歇滾動 按鈕控制 播放器
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子