如果您正在設計一個網站或者APP 歌詞播放器,你可能需要一個jquery lrc 歌詞插件。這樣的插件可以讓你輕松地把歌詞同步播放,不需要為了顯示歌詞而另開窗口。其中,jquery-rc插件就是很好的選擇。它可以方便地插入lrc歌詞,并提供了豐富的API使你可以任意控制歌詞顯示效果。
$.ajax({ url: 'lrc.merged', success: function(lrc) { $('#lyric').lrc(lrc, function() { return this.line.lyric; }).setCurrentTime(0).resize(); } });
首先,你應該準備lrc的歌詞文件。這個插件支持不同編碼格式的lrc文件,因此你不必擔心編碼問題。你可以用ajax獲取歌詞文件,用戶名字 'lrc.merged' 然后通過success回調將歌詞插入到歌詞容器中。
當歌詞被插入到 #lyric 容器中后,你需要調用 lrc 函數。這個函數接受兩個參數:歌詞字符串和一個回調函數。回調函數被執行來檢測每一行歌詞是否可以展示,然后同步顯示。現在你可以設置歌詞的當前時間(setCurrentTime()),并調整歌詞顯示的容器大小(resize())。
function checkSelected(index) { $('li').removeClass('selected').eq(index).addClass('selected'); } $('#lyric').lrc({ '00:00.00': '這是第一句歌詞1', '00:05.00': '這是第二句歌詞2', '00:10.00': '這是第三句歌詞3' }, { 'wrapper': '#lyric', 'scrollSpeed': 1000, 'skipEmpty': true, 'autoResize': true, 'clickLine': checkSelected });
除了ajax方法之外,你還可以通過這種方式直接插入靜態的lrc歌詞。通過這種方式,在options參數中指定改插件的外觀和行為。
到現在,你需要做的就是把插件的CSS文件和JS文件添加到頁面中,并在合適的地方使用上面提到的代碼片段。祝你設計出一個完美的jquery lrc 歌詞播放器!
上一篇dockerqnx