中畫(huà)網(wǎng)

標(biāo)題: 吉特巴舞曲《唱著歌兒嗨起來(lái)》（搬版主的代碼） [打印本頁(yè)]

作者: 寒冬殘荷 時(shí)間: 2022-9-14 21:34
標(biāo)題: 吉特巴舞曲《唱著歌兒嗨起來(lái)》（搬版主的代碼）

吉特巴舞曲- 　　
《唱著歌兒嗨起來(lái)》

作者: 195400 時(shí)間: 2022-9-14 21:55

這大概是KTV的感覺(jué)吧。

作者: 寒冬殘荷 時(shí)間: 2022-9-14 21:59

195400 發(fā)表于 2022-9-14 21:55
這大概是KTV的感覺(jué)吧。

老師，晚上好！LRC部分代碼哪個(gè)部分出問(wèn)題（照搬的），有一個(gè)長(zhǎng)條在那里。

作者: 藍(lán)魔 時(shí)間: 2022-9-14 22:31
欣賞一下，謝謝。

作者: 紅楓 時(shí)間: 2022-9-14 22:35

寒冬殘荷發(fā)表于 2022-9-14 21:59
老師，晚上好！LRC部分代碼哪個(gè)部分出問(wèn)題（照搬的），有一個(gè)長(zhǎng)條在那里。

我估計(jì)是歌詞或播放器帶有邊框！暫還沒(méi)去看代碼。

作者: 195400 時(shí)間: 2022-9-14 23:14

寒冬殘荷發(fā)表于 2022-9-14 21:59
老師，晚上好！LRC部分代碼哪個(gè)部分出問(wèn)題（照搬的），有一個(gè)長(zhǎng)條在那里。

這代碼也許是從多處復(fù)制粘貼的代碼拼湊而來(lái)的，沒(méi)法看，或許是container沒(méi)設(shè)置個(gè)確切的高度，從它內(nèi)部包含的標(biāo)簽也無(wú)法推斷。

作者: 非常開(kāi)心 時(shí)間: 2022-9-15 06:44
欣賞樓主的新作，點(diǎn)贊

多謝分享！

作者: 195400 時(shí)間: 2022-9-15 11:11

寒冬殘荷發(fā)表于 2022-9-14 21:59
老師，晚上好！LRC部分代碼哪個(gè)部分出問(wèn)題（照搬的），有一個(gè)長(zhǎng)條在那里。

已經(jīng)改了代碼是吧

作者: 寒冬殘荷 時(shí)間: 2022-9-15 12:46

195400 發(fā)表于 2022-9-15 11:11
已經(jīng)改了代碼是吧

老師，中午好！是的，我全部從頭到尾看了代碼。除了JS部分看不懂改不了，其它的我都按我理解的改了。

作者: 寒冬殘荷 時(shí)間: 2022-9-15 12:48

195400 發(fā)表于 2022-9-15 11:11
已經(jīng)改了代碼是吧

這個(gè)LRC歌詞JS代碼在手機(jī)上不能自動(dòng)播放，所以播放器加了控制條，這樣在手機(jī)上可以點(diǎn)擊播放音樂(lè)。

作者: 寒冬殘荷 時(shí)間: 2022-9-15 12:49

紅楓發(fā)表于 2022-9-14 22:35
我估計(jì)是歌詞或播放器帶有邊框！暫還沒(méi)去看代碼。

謝謝您光臨指導(dǎo)！我已認(rèn)真看代碼并改寫(xiě)了。

作者: 寒冬殘荷 時(shí)間: 2022-9-15 12:51

非常開(kāi)心發(fā)表于 2022-9-15 06:44
欣賞樓主的新作，點(diǎn)贊多謝分享！

謝謝您臨貼支持和鼓勵(lì)！

作者: 寒冬殘荷 時(shí)間: 2022-9-15 12:53

藍(lán)魔發(fā)表于 2022-9-14 22:31
欣賞一下，謝謝。

謝謝您臨貼支持和鼓勵(lì)！

作者: 紅楓 時(shí)間: 2022-9-15 13:06

寒冬殘荷發(fā)表于 2022-9-15 12:48
這個(gè)LRC歌詞JS代碼在手機(jī)上不能自動(dòng)播放，所以播放器加了控制條，這樣在手機(jī)上可以點(diǎn)擊播放音樂(lè)。

我不用控制條（大小設(shè)為0），手機(jī)上要播放或暫停，點(diǎn)擊圖標(biāo)就行。圖標(biāo)也可以用整幅大圖替代的。

作者: 195400 時(shí)間: 2022-9-15 13:25

寒冬殘荷發(fā)表于 2022-9-15 12:48 這個(gè)LRC歌詞JS代碼在手機(jī)上不能自動(dòng)播放，所以播放器加了控制條，這樣在手機(jī)上可以點(diǎn)擊播放音樂(lè)。

看看這個(gè)能不能在手機(jī)上播放，能播更好不能就按一下右下角的光盤(pán)圖標(biāo)

吉特巴舞曲-
《唱著歌兒嗨起來(lái)》

作者: 195400 時(shí)間: 2022-9-15 13:42

寒冬殘荷發(fā)表于 2022-9-15 12:46
老師，中午好！是的，我全部從頭到尾看了代碼。除了JS部分看不懂改不了，其它的我都按我理解的改了。

最末尾的代碼肯定是多余的。

<script type="text/javascript">
var my_audio =document.getElementById("MusicPlayer");
my_audio.onended = function(){document.getElementById("aplay").className="";};
my_audio.onpause = function(){document.getElementById("aplay").className="";};
var lyric = parseLyric(songkrc);
my_audio.ontimeupdate = function () { for (var i = 0;
i < lyric.length; i++) { if(this.currentTime > lyric[i][0]){ document.getElementById("ullrc").innerHTML = lyric[i][1]; if(i+1==lyric.length){document.getElementById("").innerHTML = ""; }else{ document.getElementById("").innerHTML = lyric[i + 1][1];};};};}; my_audio.play();
</script>

復(fù)制代碼

作者: 紅楓 時(shí)間: 2022-9-15 21:40

195400 發(fā)表于 2022-9-15 13:25
看看這個(gè)能不能在手機(jī)上播放，能播更好不能就按一下右下角的光盤(pán)圖標(biāo)

光盤(pán)在閃點(diǎn)圖的下一層，點(diǎn)不了光盤(pán)。干脆以閃點(diǎn)圖為按鈕圖吧！

作者: 195400 時(shí)間: 2022-9-15 21:59

紅楓發(fā)表于 2022-9-15 21:40
光盤(pán)在閃點(diǎn)圖的下一層，點(diǎn)不了光盤(pán)。干脆以閃點(diǎn)圖為按鈕圖吧！

光盤(pán)為了不太顯眼做得較小，把畫(huà)面放大一些就可以點(diǎn)上了。

作者: 寒冬殘荷 時(shí)間: 2022-9-20 12:54

195400 發(fā)表于 2022-9-15 13:25
看看這個(gè)能不能在手機(jī)上播放，能播更好不能就按一下右下角的光盤(pán)圖標(biāo)

老師，中午好！這個(gè)在手機(jī)上能自動(dòng)播放。可惜不能循環(huán)。改為循環(huán)播放，音樂(lè)能循環(huán)，但第二遍起就沒(méi)有LRC歌詞。

作者: 195400 時(shí)間: 2022-9-20 14:04

寒冬殘荷發(fā)表于 2022-9-20 12:54
老師，中午好！這個(gè)在手機(jī)上能自動(dòng)播放。可惜不能循環(huán)。改為循環(huán)播放，音樂(lè)能循環(huán)，但第二遍起就沒(méi)有LRC ...

確實(shí)是有問(wèn)題，在電腦上也是同樣的表現(xiàn)。
換了一個(gè)代碼，倒是能循環(huán)了就是顯示差點(diǎn)意思。

作者: 寒冬殘荷 時(shí)間: 2022-9-20 17:55

195400 發(fā)表于 2022-9-20 14:04
確實(shí)是有問(wèn)題，在電腦上也是同樣的表現(xiàn)。
換了一個(gè)代碼，倒是能循環(huán)了就是顯示差點(diǎn)意思。

老師，傍晚好！可以了，手機(jī)上能自動(dòng)播放，也能循環(huán)了。只是不能直接打開(kāi)當(dāng)前頁(yè)，要從代碼騰圖版塊目錄頁(yè)點(diǎn)擊帖子標(biāo)題進(jìn)入才能自動(dòng)播放。

作者: 寒冬殘荷 時(shí)間: 2022-9-20 17:57

195400 發(fā)表于 2022-9-20 14:04
確實(shí)是有問(wèn)題，在電腦上也是同樣的表現(xiàn)。
換了一個(gè)代碼，倒是能循環(huán)了就是顯示差點(diǎn)意思。

您說(shuō)電腦上也是同樣的表現(xiàn)，指的是？

作者: 195400 時(shí)間: 2022-9-20 18:00
不太明白什么是“不能直接打開(kāi)當(dāng)前頁(yè)”
試試
http://www.nujv.cn/forum.ph ... 6&page=3#pid2064018
或

http://www.nujv.cn/forum.ph ... 9&fromuid=74692

作者: 195400 時(shí)間: 2022-9-20 18:12

寒冬殘荷發(fā)表于 2022-9-20 17:57
您說(shuō)電腦上也是同樣的表現(xiàn)，指的是？

因?yàn)?樓的歌詞字體是60px，用lrcPlayerX.min.js 字的上部會(huì)被削掉一點(diǎn)（顯示差點(diǎn)意思），為解決這問(wèn)題把代碼略修改了一些，就是lrcPlayerX.packed.js ，
但它的問(wèn)題是只播放一遍，懶得去找其中的毛病了換回 lrcPlayerX.min.js 并把字體改小一點(diǎn) 55px，問(wèn)題就解決了。

關(guān)鍵還是代碼不夠靈活不能適應(yīng)外部條件的變化。

作者: 寒冬殘荷 時(shí)間: 2022-9-20 18:56

195400 發(fā)表于 2022-9-20 18:00
不太明白什么是“不能直接打開(kāi)當(dāng)前頁(yè)”
試試
http://www.nujv.cn/forum.ph ... 6&page=3#pid2064018 ...

在手機(jī)上用此帖的地址打開(kāi)就不自動(dòng)播放。

作者: 195400 時(shí)間: 2022-9-20 19:31

寒冬殘荷發(fā)表于 2022-9-20 18:56
在手機(jī)上用此帖的地址打開(kāi)就不自動(dòng)播放。

與瀏覽器有關(guān)，有的可以有的就不行。

作者: 寒冬殘荷 時(shí)間: 2022-9-20 19:33

195400 發(fā)表于 2022-9-20 18:12
因?yàn)?樓的歌詞字體是60px，用lrcPlayerX.min.js 字的上部會(huì)被削掉一點(diǎn)（顯示差點(diǎn)意思），為解決這問(wèn)題把 ...

這個(gè)問(wèn)題我發(fā)現(xiàn)了，我在1樓已改好了。應(yīng)該是您在JS中設(shè)u l的高度為50的原因。我改為70，和li一樣，并設(shè)置三個(gè)行距都為70，這樣文字垂直居中，60px大小的文字就可以全顯示了，大于70px應(yīng)該就不行了。這是我的理解，不知是否正確？請(qǐng)老師指教。

作者: 寒冬殘荷 時(shí)間: 2022-9-20 19:37

195400 發(fā)表于 2022-9-20 19:31
與瀏覽器有關(guān)，有的可以有的就不行。

我是在手機(jī)上的微信里打開(kāi)的。我試試用手機(jī)瀏覽器打開(kāi)看看。

作者: 195400 時(shí)間: 2022-9-20 19:40

寒冬殘荷發(fā)表于 2022-9-20 19:33
這個(gè)問(wèn)題我發(fā)現(xiàn)了，我在1樓已改好了。應(yīng)該是您在JS中設(shè)u l的高度為50的原因。我改為70，和li一樣，并設(shè)置 ...

原來(lái)代碼是

var lrc_li_height = 70, lrc_ul_height = 50;
var top = that.idx * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;

復(fù)制代碼

若都改為70就等同于

var top = that.idx * lrc_li_height;

復(fù)制代碼

我就是這么改了以后出的問(wèn)題。
70 可以理解就是行高，50怎么來(lái)的不清楚。如果這兩個(gè)數(shù)可以由適當(dāng)?shù)拇a獲得就好了，嘗試過(guò)沒(méi)成功就放棄了。

作者: 195400 時(shí)間: 2022-9-20 19:45

寒冬殘荷發(fā)表于 2022-9-20 19:37
我是在手機(jī)上的微信里打開(kāi)的。我試試用手機(jī)瀏覽器打開(kāi)看看。

iphone自帶的safrari就不行，另裝的夸克瀏覽器就可以自動(dòng)播放。

其它品牌的手機(jī)、其它的瀏覽器沒(méi)試過(guò)。

作者: 紅楓 時(shí)間: 2022-9-21 17:34

寒冬殘荷發(fā)表于 2022-9-20 18:56
在手機(jī)上用此帖的地址打開(kāi)就不自動(dòng)播放。

手機(jī)上能不能自動(dòng)播放是看情況的，在瀏覽器里，手機(jī)直接使用wiwf時(shí)，就能自動(dòng)播放；而使用移動(dòng)通訊網(wǎng)絡(luò)時(shí)就不能自動(dòng)播放。這是手機(jī)系統(tǒng)自行設(shè)定的。
同理，LRC歌詞也許是根據(jù)程序設(shè)定，只要不開(kāi)啟播放，也就不會(huì)顯示歌詞。

再有，手機(jī)微信里就得點(diǎn)擊播放按鈕才能播放，不管是在wiwf還是在移動(dòng)通訊網(wǎng)佫，都如此的。

作者: 寒冬殘荷 時(shí)間: 2022-9-21 19:18

紅楓發(fā)表于 2022-9-21 17:34
手機(jī)上能不能自動(dòng)播放是看情況的，在瀏覽器里，手機(jī)直接使用wiwf時(shí)，就能自動(dòng)播放；而使用移動(dòng)通訊網(wǎng)絡(luò)時(shí) ...

紅楓老師，晚上好！我這個(gè)帖子的音樂(lè)播放代碼現(xiàn)改用了195400老師的代碼后可以在手機(jī)上自動(dòng)播放。但必須從另一網(wǎng)頁(yè)進(jìn)入，比如，現(xiàn)是在此帖的第4頁(yè)，點(diǎn)擊第1頁(yè)打開(kāi)此帖第1頁(yè)就能自動(dòng)播放音樂(lè)了。

作者: 寒冬殘荷 時(shí)間: 2022-9-21 19:27

紅楓發(fā)表于 2022-9-21 17:34
手機(jī)上能不能自動(dòng)播放是看情況的，在瀏覽器里，手機(jī)直接使用wiwf時(shí)，就能自動(dòng)播放；而使用移動(dòng)通訊網(wǎng)絡(luò)時(shí) ...

直接用audio標(biāo)簽播放音樂(lè)在手機(jī)上就不能自動(dòng)播放，195400老師的這個(gè)代碼是用JS控制播放的，所以可以在手機(jī)上自動(dòng)播放。現(xiàn)我不理解的是為什么用此帖地址打開(kāi)不自動(dòng)播放，而從其他頁(yè)面點(diǎn)擊打開(kāi)就可以自動(dòng)播放。這個(gè)問(wèn)題得195400老師再考慮

作者: 寒冬殘荷 時(shí)間: 2022-9-21 19:29

寒冬殘荷發(fā)表于 2022-9-21 19:27
直接用audio標(biāo)簽播放音樂(lè)在手機(jī)上就不能自動(dòng)播放，195400老師的這個(gè)代碼是用JS控制播放的，所以可以在手 ...

我現(xiàn)是在手機(jī)上微信中進(jìn)入中畫(huà)網(wǎng)這里回帖的。

作者: 195400 時(shí)間: 2022-9-21 19:42
看看這個(gè)是不是自動(dòng)播放