原生lrc歌词同步之假相应频谱播放器
进度可控。以事先获得音频波形数据做响应依据驱动频谱运动，缺省音波数据时插件自建一个随机数据，律动响应差强人意；可以访问《获取本地音频波形数据》采集本地特定音频的音波数据。
一、引用与配置代码举例：
<script>
var geci = `
[00:00.107]歌词1
[00:06.00]歌词2
[00:10.00]歌词3
[00:25.163]……
[03:46.107]歌词N
`;
var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/js2024/jxypp_yslrc.js';
document.body.appendChild(sf);
sf.onload = () => {
HCPlayer({
papa: '#mama',
geci: geci,
ypData: ypData,
skip: -0.3,
average: -0.5,
pinpu: { size: 4, gap: 2, max: 150 },
player_css: 'right: 20px; bottom: 10px; --ww: 400px; --color1: darkgreen; --color2: lightgreen;',
lrc_css: 'left: 50%; top: 20px; --bg: linear-gradient(lime, green); color: lightgreen;',
fs_css: 'left: 20px; bottom: 20px; --bg: green; --color: white;',
});
};
</script>
二、配置说明：
sf.onload = () => {
HCPlayer({
papa: '#mama', /* 帖子id选择器或类选择器'.mama'，必须 */
geci: geci, /* 声明好的歌词变量 */
ypData: ypData, /* 声明好的音波数据，可缺省 */
skip: -0.3, /* 歌词起唱偏移量 */
average: -0.5, /* 歌词平均演唱用时调节系数 */
/* 频谱对象设置，厚度与间隔会影响频谱总数 */
pinpu: { size: 4, gap: 2, max: 150 }, /* 频谱厚度、间隔值、最高值 */
/* 播放器CSS设置 频谱颜色仅支持颜色表达法 */
player_css: `
right: 20px; /* 支持left定位 */
bottom: 10px; /* 支持top定位 */
--ww: 400px; /* 宽度（影响频谱总数） */
--color1: darkgreen; /* 频谱颜色（主色）*/
--color2: lightgreen; /* 频谱颜色（配色）*/
`,
/* 歌词界面CSS设置 */
lrc_css: `
left: 50%; /* 支持left定位 */
top: 20px; /* 支持bottom定位 */
color: lightgreen; /* 歌词底色 */
--bg: linear-gradient(lime, green); /* 歌词进度颜色 */
`,
/* 全屏按钮CSS设置 */
fs_css: `
left: 20px; /* 支持right定位 */
bottom: 20px; /* 支持top定位 */
--bg: green; /* 按钮背景色 */
--color: white; /* 按钮前景色 */
`,
});
};
关于参数 average：该参数在原生lrc歌词同步插件都可能出现，参数值是一个数值型，用于调整平均数，此参数值越合适，歌词同步月趋于准确。例如，歌词演唱用时平均值偏大时，可以给一个 0.5 或相应的数值，偏小时给个 -0.5 或相应的数值，具体数值大小视情况而定。
三、简化配置举例：
//可缺省的参数去掉，CSS配置部分使用默认配置
sf.onload = () => {
HCPlayer({ papa: '#mama' });
};
四、应用实例：偏爱
前一篇: 原生lrc歌词同步之卡式磁带播放器
下一篇: 原生lrc歌词同步之老唱机播放器
发表评论:
评论列表 [2条]
#2 | 知名不具 于 2024-8-27 19:19 发布: 频谱有主色和配色的选择，也可以让频谱更好看了。
#1 | 小希 于 2024-8-26 08:57 发布: 这个贴子必须跟一个，得复习一下音波数据做法。。
