htmlスクロール歌詞の作り方: まずタグにエンコード形式を記述し、CSS スタイルと jQuery を導入し、プレーヤーを配置します。コードは [
このチュートリアルの動作環境: Windows7 システム、html5 バージョン、DELL G3 コンピューター。
html スクロールする歌詞の作り方:
まず、index.html のようなランダムな名前の HTML ファイルを作成します。言うまでもなく、これは簡単です。急いで書き始めないでください。コードの場合は、css を作成しています。ファイルの場合は、musicplay.css という名前を付けるとよいでしょう。js の場合は、読み取りと調整を容易にするために、html ファイルに直接書き込むことができます。新しい js ファイルは作成しませんが、 jQueryファイルを用意する必要があります。お持ちでない方でも大丈夫です。解決方法はまた後ほどお話します。準備作業が終わり、書き始めます。まずタグにエンコード形式を書きます。 , さてさて、先ほど作成したCSSスタイルとjQueryを紹介します コードは次のとおりです:
コードは次のとおりです:
<meta charset="UTF-8"><title>爱在西元前-周杰伦 </title><link type="text/css" rel="stylesheet" href="css/musicplay.css" /> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <!--注意:这种从网上直接引入的方法需要链接网络,如果你本地下载好了,就把这句话删除,采用下面的映入方式--> <script src="js/jquery-1.9.1.min.js"></script></head>
After the head content is書かれたら、本文を書き始めます。最初に、ラベルである配置プレーヤーを使用します。コードは次のとおりです:
<center> <audio autoplay="autoplay src="爱在西元前.mp3" controls></audio> </center><!--这里修改播放器里面播放的音乐,这里只有简单的控制,没做上一曲,下一曲的功能 ,autoplay="autoplay"属性为自动播放,不想让自动播放删去即可 -->
そこに行くだけ -->次にボックスを書きます。コードは次のとおりです。次のとおりです:
ボックスの CSS コードは次のとおりです (関数の備考を参照):
次のステップは js スクリプトです。私たちの設計アイデアは次のとおりです (次の関数で完成します) ):
関数 1: parseLyric() は歌詞を分割します。このステップは主に歌詞を別の行に表示することです。
関数 2: highLight() は、現在配置されている歌詞をハイライト表示します。現在の曲がどこにあるかを示します。一文
関数 3: audio.addEventListener() はスクロールするため、リアルタイムでレンダリングされます。そのため、継続的にレンダリングする必要があります。
関数 4: getLineNo( ) は、この時点の行数を取得します (早送りまたは巻き戻しすると、調整に従って歌詞も変更されます)
関数 5: audio.addEventListener() は、再生後に先頭に戻ります。これを行う必要はありません。あまり意味がありません。これは、関数を完成させて説明した後、コードを直接投稿するためのものです。
<script type="text/javascript"> $(function() { function parseLyric(text) { //按行分割歌词 let lyricArr = text.split('\n'); //console.log(lyricArr) //0: "[ti:爱在西元前]" "[ar:周杰伦]"... let result = []; //新建一个数组存放最后结果 //遍历分割后的歌词数组,将格式化后的时间节点,歌词填充到result数组 for (i = 0; i < lyricArr.length; i++) { let playTimeArr = lyricArr[i].match(/\[\d{2}:\d{2}((\.|\:)\d{2})\]/g); //正则匹配播放时间 let lineLyric = ""; if (lyricArr[i].split(playTimeArr).length > 0) { lineLyric = lyricArr[i].split(playTimeArr); } if (playTimeArr != null) { for (let j = 0; j < playTimeArr.length; j++) { let time = playTimeArr[j].substring(1, playTimeArr[j].indexOf("]")).split(":"); //数组填充 result.push({ time: (parseInt(time[0]) * 60 + parseFloat(time[1])).toFixed(4), content: String(lineLyric).substr(1) }); } } } return result; } // 这里请按照格式放入相应歌词--开始 // 格式可能看着很复杂,其实是根据lrc歌词文件换句前加入\n 换行符,然后删除多余空行.即可!
// 这里请按照格式放入相应歌词--结束 let audio = document.querySelector('audio'); let result = parseLyric(text); //执行lyc解析 // 把生成的数据显示到界面上去 let $ul = $("<ul></ul>"); for (let i = 0; i < result.length; i++) { let $li = $("<li></li>").text(result[i].content); $ul.append($li); } $(".bg").append($ul); let lineNo = 0; // 当前行歌词 let preLine =1; // 当播放6行后开始滚动歌词 let lineHeight = -30; // 每次滚动的距离 // 滚动播放 歌词高亮 增加类名active function highLight() { let $li = $("li"); $li.eq(lineNo).addClass("active").siblings().removeClass("active"); if (lineNo > preLine) { $ul.stop(true, true).animate({ top: (lineNo - preLine) * lineHeight }); } } highLight(); // 播放的时候不断渲染 audio.addEventListener("timeupdate", function() { if (lineNo == result.length) return; if ($("li").eq(0).hasClass("active")) { $("ul").css("top", "0"); } lineNo =getLineNo(audio.currentTime); highLight(); lineNo++; }); // 当快进或者倒退的时候,找到最近的后面那个 result[i].time function getLineNo(currentTime) { if (currentTime >=parseFloat(result[lineNo].time)) { // 快进 for (let i = result.length - 1; i >= lineNo; i--) { if (currentTime >= parseFloat(result[i].time)) { return i; } } } else { // 后退 for (let i = 0; i <= lineNo; i++) { if (currentTime <= parseFloat(result[i].time)) { return i - 1; } } } } //播放结束自动回到开头 audio.addEventListener("ended", function() { lineNo = 0; highLight(); audio.play(); $("ul").css("top", "0"); }); }); </script>
関連学習の推奨事項: html ビデオ チュートリアル
以上がHTMLでスクロール歌詞を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。