很吵很提神的VOCALOID
Markdown的图片排版一坨，用html做了个九宫格，写了一个js实现了点击图片播放音乐的功能
点击图片播放音乐⬇

图片九宫格

js源码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 创建一个对象来存储每个图片的Audio实例
var audioPlayers = {};

function toggleMusic(imageId, musicFile) {
    // 如果这个图片的Audio实例不存在，则创建一个
    if (!audioPlayers[imageId]) {
        audioPlayers[imageId] = new Audio(musicFile);
    }

    var audio = audioPlayers[imageId];

    // 如果音频正在播放，则停止它；否则，播放它
    if (audio.paused) {
        audio.play();
    } else {
        audio.pause();
        // 如果需要，你也可以将播放位置重置到开始
        // audio.currentTime = 0;
    }
}

对应的图片格式为

1
<img id="yourid" src="your.jpg"  onclick="toggleMusic('yourid', '刘建华👍.mp3')">

其中”yourid”可以是任意字符，但要注意在代码中唯一存在；

“your.jpg”换为图片链接；”刘建华👍.mp3”换为音乐链接；

忙里偷闲☕整了一下午，不得不吐槽的是写在html里的script里在hexo是不会生效的。起初写了点击播放音乐🎶的script，由于存在Fancybox插件，点击后会放大图片而不会触发播放音乐，故又把代码改成鼠标悬停播放音乐，离开时自动关闭音乐，依然不会触发。很合理的怀疑是什么占用了js的监听😧，期间把页面右下角的Live2d灰色的开水烫着喝的哈基米😿关了、把左下角的Aplayer关了☠、把Fancybox关了、把点击鼠标飘过的”富强民主文明和谐“这样的特效给关了，依然没有效果。痛惜时间成本，最后受这篇文章启发将js写入hexo生成的html总算是可以了，一看天都黑了，我真是个基米阿！（另：鼠标悬浮触发不是很稳定，改成了点击触发，关闭了Fancybox，对我这个把博客当相册一行一张图完全不排版的人，也用不上Fancybox的图片放大功能了）