pix音乐播放器实现歌词显示、音量调节和伪自动播放

2023年2月10日 365

极客

最新代码看最后

一个简陋的歌词显示js代码，使用pix公用的 API。没写什么歌词的特效，就是直接显示，添加了歌词显示开关按钮，可以改歌词文本的css，歌词位置也可以自己修改css内容。修改了很多次了，代码效果就是目前网站的效果。

还有播放器音量控制和进入网页点击任意位置播放音乐的代码也一起放下面了。

有能力的大佬可以帮忙美化，更有能力的写个wp插件更好，老付后面功能全更新出来最好

歌词显示代码，复制下面代码放到pix设置-扩展设置-底部HTML代码

<script>
//在原音乐图标下增加歌词开关
$('.t_music').after('<div class="t_lrc top_tool icon_color" style="margin-bottom: 8px;">\
  <a class="bg_lrc"><i class="ri-play-list-line"></i></a>\
</div>');
$('a.bg_lrc').css({
"padding": "7px",
"display": "flex",
"line-height": "1",
"background": "#c4d0e6",
"border-radius": "8px"
});
$('a.bg_lrc i').css({
"color": "#44507b",
"fontSize": "16px",
});

$('.bg_lrc').click(function() {
  if (lyricsContainer.css('display') === 'none') {
    lyricsContainer.css('display', 'block');
    $('a.bg_lrc i').css({
     "color": "#44507b",
    });
    $('a.bg_lrc').css({
   "background": "#c4d0e6",
    });
  } else {
    lyricsContainer.css('display', 'none');
    $('a.bg_lrc i').css({
     "color": "#aeaeae",
    });
    $('a.bg_lrc').css({
   "background": "rgb(196 208 230 / 38%)",
    });
  }
});

//创建容器
var lyricsContainer = $('<div class="lyrics-container"></div>');
$('.player_box').append(lyricsContainer);
var css = $(window).width() > 767 ? 
{
  //桌面歌词css（按照下面格式自行修改）
    position: 'fixed',
    bottom: '10px',
    left: '2%',
    width: '350px',
    height: '100px',
    overflow: 'hidden',
    zIndex: '999',
    pointerEvents: 'none',
  } : 
  {
    //移动端歌词css（按照下面格式自行修改）
    position: 'fixed',
    bottom: '88px',
    left: '0',
    width: '100%',
    height: '72px',
    textAlign: 'center',
    overflow: 'hidden',
    zIndex: '999',
    pointerEvents: 'none',
  };
lyricsContainer.css(css);

var lyricsMap = {};

// 获取歌词
async function fetchLyrics(id) {
if (!lyricsMap[id]) {
var lrcOriginal = await $.get('https://bohecat.com/musicapi/?type=lrc&id=' + id);
lyricsMap[id] = parseLyrics(lrcOriginal);
}
return lyricsMap[id];
}

// 解析歌词
function parseLyrics(lrcOriginal) {
  var lyrics = [];
  var lines = lrcOriginal.split("\n");
  for (var i = 0; i < lines.length; i++) {
    var line = lines[i];
    if (!line.trim()) {
      continue;
    }
    var timeAndText = line.split("]");
    var time = timeAndText[0].substr(1);
    var text = timeAndText[1];
    // 增加代码：如果歌词为空，跳过此次循环
    if (!text.trim()) {
       continue;
    }
    // 增加代码：把时间转换成秒
    var timeInSeconds = 0;
    var timeParts = time.split(":");
    timeInSeconds += parseInt(timeParts[0], 10) * 60 - 0.5;
    timeInSeconds += parseFloat(timeParts[1]);
    lyrics.push({
      time: timeInSeconds,
      text: text
    });
  }
  return lyrics;
}

// 更新歌词
function updateLyrics(currentTime, lyrics) {
for (var i = 0; i < lyrics.length; i++) {
if (currentTime >= lyrics[i].time && (i === lyrics.length -1 || currentTime < lyrics[i+1].time)) {
// 创建4行歌词
// 防止数组i越界
var currentLine3 = "";
if (i - 1 >= 0 && typeof lyrics[i-1].text === "string") {
    currentLine3 = lyrics[i-1].text;
}
var currentLine = "";
if (typeof lyrics[i].text === "string") {
    currentLine = lyrics[i].text;
}
var currentLine1 = "";
if (i + 1 < lyrics.length && typeof lyrics[i+1].text === "string") {
    currentLine1 = lyrics[i+1].text;
}
var currentLine2 = "";
if (i + 2 < lyrics.length && typeof lyrics[i+2].text === "string") {
    currentLine2 = lyrics[i+2].text;
}
//歌词文本css（修改style内的内容即可）
lyricsContainer.html(`
<div class="current-line" style="color: #484848; font-size: 10px;opacity: .4;">${currentLine3}</div>
<div class="current-line" style="color: #000000; font-size: 14px;">${currentLine}</div>
<div class="current-line" style="color: #484848; font-size: 12px;opacity: .4;">${currentLine1}</div>
<div class="current-line" style="color: #484848; font-size: 10px;opacity: .1;">${currentLine2}</div>
`);
// 增加代码：添加从下往上线性滚动的动画
$('.current-line').animate({
top: '-=30px'
}, 2000, function() {
$(this).css({
top: '30px'
});
});
}
}
}

// 监听音频播放进度更新事件，更新歌词
audiobox[0].addEventListener("timeupdate", async function () {
var media = this;
var id = media.getAttribute('src').split('id=')[1];
var lyrics = await fetchLyrics(id);
updateLyrics(this.currentTime, lyrics);
});
</script>

点击任何位置自动播放，同上复制到pix设置-扩展设置-底部HTML代码

<script>
    // 屏幕宽度大于768执行
    if (screen && screen.width > 768) {
        // 点击 body 任何位置就播放音乐，并只执行一次
        var body = document.querySelector('body');
        // 给 body 绑定 click 事件
        body.addEventListener('click', bj);
        function bj(){
            // 执行播放代码
            audiobox[0].play();//播放背景音乐
            audioplay(); //播放后执行的函数
            body.removeEventListener("click",bj);// 给 body 解除 click 事件绑定
        }
    }
         // 5s隐藏音乐播放器
    trigger = setTimeout(function(){
    mu_box_hide();
    },5000); // 5s隐藏音乐播放器
</script>

音量调节，添加到pix设置-扩展设置-自定义Javascript。修改var finalLong = 25;里的25即可

    // 背景音乐音量调节
    var finalLong = 25;
    audiobox[0].volume = finalLong / 100;
    $('.vo_size').height(finalLong);

有大佬简化了代码，当然改东西要自己找了，基本差不多，就是格式和位置变了。

<script>
//在原音乐图标下增加歌词开关
$('.t_music').after(`
<div class="t_lrc top_tool icon_color" style="margin-bottom: 8px;"><a class="bg_lrc"><i class="ri-play-list-line"></i></a></div>
`);
$('a.bg_lrc').css({"padding": "7px","display": "flex","line-height": "1","background": "#c4d0e6","border-radius": "8px"});
$('a.bg_lrc i').css({"color": "#44507b","fontSize": "16px"});

$('.bg_lrc').click(function() {
  if (lyricsContainer.css('display') === 'none') {
    lyricsContainer.css('display', 'block');
    $('a.bg_lrc i').css({"color": "#44507b"});
    $('a.bg_lrc').css({"background": "#c4d0e6"});
  } else {
    lyricsContainer.css('display', 'none');
    $('a.bg_lrc i').css({"color": "#aeaeae"});
    $('a.bg_lrc').css({"background": "rgb(196 208 230 / 38%)"});
  }
});

//创建容器
const lyricsContainer = $(`
<div class="lyrics-container"></div>
`).appendTo('.player_box');
const isDesktop = $(window).width() > 767;
lyricsContainer.css({
position: 'fixed',
bottom: isDesktop ? '10px' : '88px',
left: isDesktop ? '2%' : '0%',
width: isDesktop ? '350px' : '100%',
height: isDesktop ? '100px' : '72px',
textAlign: isDesktop ? 'left' : 'center',
overflow: 'hidden',
zIndex: '999',
pointerEvents: 'none',
});

var lyricsMap = {};

async function fetchLyrics(id) {
if (!lyricsMap[id]) {
const lrcOriginal = await $.get(`https://bohecat.com/musicapi/?type=lrc&id=${id}`);
lyricsMap[id] = parseLyrics(lrcOriginal);
}
return lyricsMap[id];
}

function parseLyrics(lrcOriginal) {
const lines = lrcOriginal.split("\n");
const lyrics = lines
.filter(line => line.trim() !== "")
.map(line => {
const timeAndText = line.split("]");
const time = timeAndText[0].substr(1);
const text = timeAndText[1].trim();
if (text === "") {
return null;
}
const timeParts = time.split(":");
const timeInSeconds = parseInt(timeParts[0], 10) * 60 + parseFloat(timeParts[1] - 0.5);
return { time: timeInSeconds, text };
})
.filter(lyric => lyric !== null);
return lyrics;
}

function updateLyrics(currentTime, lyrics) {
lyrics.forEach((lyric, i) => {
if (currentTime >= lyric.time && (i === lyrics.length - 1 || currentTime < lyrics[i + 1].time)) { const currentLine = lyric.text; const currentLine1 = lyrics.slice(i + 1, i + 2).map(lyric => lyric.text)[0] || "";
const currentLine2 = lyrics.slice(i + 2, i + 3).map(lyric => lyric.text)[0] || "";
const currentLine3 = lyrics.slice(i - 1, i).map(lyric => lyric.text)[0] || "";
lyricsContainer.html(`
<div class="current-line" style="color: #484848; font-size: 10px;opacity: .4;">${currentLine3}</div>
<div class="current-line" style="color: #000000; font-size: 14px;">${currentLine}</div>
<div class="current-line" style="color: #484848; font-size: 12px;opacity: .4;">${currentLine1}</div>
<div class="current-line" style="color: #484848; font-size: 10px;opacity: .1;">${currentLine2}</div>
`);
$('.current-line').animate({
top: '-=30px'
}, 2000, function() {
$(this).css({
top: '30px'
});
});
}
});
}

audiobox[0].addEventListener("timeupdate", async function() {
const media = this;
const id = media.getAttribute('src').split('id=')[1];
const lyrics = await fetchLyrics(id);
updateLyrics(this.currentTime, lyrics);
});

</script>

Comments | 4 条评论

小熊
· 2023年2月10日

好东西，我只能看看没能力美化，没事听听歌😒
- 冷水薄荷
  · 2023年2月10日
  
  @小熊音乐站忠实听众😂
  - 小熊
    · 2023年2月10日
    
    @Bohe 失踪人口回归，听歌我就在想你在不在线😒
    - 冷水薄荷
      · 2023年2月10日
      
      @小熊上班摸鱼就在了

pix音乐播放器实现歌词显示、音量调节和伪自动播放

最新代码看最后

小熊

冷水薄荷

小熊

冷水薄荷

加载中..