《纯乐古筝-传统古曲珍藏版Vol.1》 帖赠：小风（学习黑黑专辑播放器）
<style>#papa { margin: 120px 0 0 calc(50% - 593px); display: grid; place-items: center; width: 1024px; height: 640px; background: gray url('https://wj1.zp68.com:812/lxx/yunhua/2023/01/17/5IF.gif') no-repeat center/cover; background-blend-mode: normal, color; box-shadow: 3px 3px 20px #000; overflow: hidden; user-select: none; position: relative; perspective: 3000px; z-index: 1; }
#papa::before, #papa::after { position: absolute; content: ''; pointer-events: none; }
#papa::before { background: black url('https://365.tf/disk/tf/1674694304.gif'); mix-blend-mode: difference; border-radius: 50%; width: 408px; height: 363px; left: -10px; top: -20px; }
#papa::after { content: '帖赠：小风'; font: bold 1.6em / 1.6em sans-serif; color: orange; text-shadow: 2px 2px 4px black; bottom: 80px; left: 20; transform: rotate(360deg); }
</style>
<div id="papa"></div>
<script >
(function() {
(function(mkPlayer) {let defaults = {player_css: 'bottom: 0; left: 50%; transform: translateX(-50%);',mlist_css: 'top: 0; left: 0;',fs_btn: 'left: 0; top: 0;',playerCode: `<style>#mplayer {position: absolute;display: grid;grid-template-areas: 'cur btnplay dur''prog prog prog';gap: 8px 2px;place-items: end center;color: var(--color);font: normal 16px sans-serif;padding-bottom: 20px;z-index: 999;--ww: 260px;--color: hsla(0,0%,100%,.75);--track: hsla(90,100%,95%,.65);--prog: linear-gradient(90deg,hsla(90,30%,50%,.55),hsla(280,40%,50%,.75),hsla(30,100%,50%,.65));}#cur { grid-area: cur; color: var(--color); }#dur { grid-area: dur; color: var(--color); }#btnplay {--state: paused;grid-area: btnplay;background: conic-gradient(red,orange,yellow,green,teal,blue,purple);mask: radial-gradient(transparent 3px,red 0);-webkit-mask: radial-gradient(transparent 3px,red 0);border-radius: 50%;width: 35px;height: 35px;cursor: pointer;animation: rot linear 3s infinite;animation-play-state: var(--state);}#prog {--xx: 0px;grid-area: prog;width: var(--ww);height: 4px;background: var(--track);position: relative;display: grid;place-items: center;border-radius: 4px;}#prog::before, #prog::after { position: absolute; content: ''; }#prog::before {left: 0;width: var(--xx);height: 100%;border-radius: 6px;background: var(--prog);border-radius: 4px;}#prog::after {left: calc(var(--xx) - 12px);opacity: .85;width: 16px;height: 16px;background: radial-gradient(transparent 2px, teal 0, black);border-radius: 50%;cursor: pointer;}#mlist { --color1: lightgreen; --color2: pink;position: absolute; padding: 20px; }#mlist > a { color: var(--color1); cursor: pointer; text-shadow: 1px 1px 2px black; text-decoration: none; }#mlist >a:hover { color: var(--color2); }.sColor { color: var(--color2); }#btnMsg {position: absolute;color: snow;background: black;opacity: 0;border: 2px solid snow;border-radius: 8px;padding: 4px;transition: all .75s;cursor: pointer;z-index: 1000;}@keyframes rot { to { transform: rotate(1turn); } }</style><div id="mlist"></div><div id="mplayer"><span id="btnplay"></span><span id="prog"></span><span id="cur">00:00</span><span id="dur">00:00</span></div><span id="btnMsg">全屏观赏</span>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;mlist.style.cssText += data.mlist_css;btnMsg.style.cssText += data.fs_btn;let mDrag = false, timerId, fs = false;let aud = document.createElement('audio');papa.appendChild(aud);(function addList() {let str = '';data.m_ar.forEach( (item,key) => {str += `<a onclick="javascript:mplay(${key})">${key+1} ${data.m_ar}</a><br>`;});mlist.innerHTML = str;})();btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();btnMsg.onclick = () => fs ? document.exitFullscreen() : papa.requestFullscreen();papa.onmousemove = (e) => {clearTimeout(timerId);btnMsg.style.opacity = '.95';timerId = setTimeout('btnMsg.style.opacity = "0"', 3000);};aud.addEventListener('timeupdate', () => {cur.innerText = toMin(aud.currentTime);dur.innerText = toMin(aud.duration);if(mDrag===false) prog.style.setProperty('--xx', aud.currentTime * prog.offsetWidth / aud.duration + 'px');});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('ended', () => mplay());aud.onerror = () => mplay();prog.onmousedown = () => mDrag = true;document.onmouseup = () => mDrag = false;mplayer.onmouseup = (e) => { if(mDrag) aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth; };mplayer.onmousemove = (e) => { if(mDrag) moveBar(e.offsetX); };let mState = () => aud.paused ? btnplay.style.setProperty('--state', 'paused'): btnplay.style.setProperty('--state', 'running');mplay = (idx=-1) => {if (idx < 0) idx = Math.floor(Math.random() * data.m_ar.length);aud.src = data.m_ar;aud.play();setRed(idx);};document.addEventListener("fullscreenchange", () => {if (document.fullscreenElement !== null) {fs = true;btnMsg.innerText = '退出全屏';} else {fs = false;btnMsg.innerText = '全屏观赏';}});let setRed= (idx) => {let str = mlist.innerHTML;str = str.replace(/<\/?span[^\>]*\>/g,'');str = str.replace(`${idx+1} ${m_ar}`, `${idx+1} <span class="sColor">${m_ar}</span>`);mlist.innerHTML = str;};let moveBar = (x) => {if(x < 0) x = 0;if(x > prog.offsetWidth - 5) x = prog.offsetWidth - 5;prog.style.setProperty('--xx', x + 'px');};let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;};mplay();};mkPlayer.HCPlayer = playCode;})(this);
let m_ar = [
['https://wj1.zp68.com:812/lxx/yunhua/2023/01/17/yy/01.mp3','紫竹调 '],
['https://wj1.zp68.com:812/lxx/yunhua/2023/01/17/yy/02.mp3','梁祝 '],
['https://wj1.zp68.com:812/lxx/yunhua/2023/01/17/yy/03.mp3','小河淌水 '],
['https://wj1.zp68.com:812/lxx/yunhua/2023/01/17/yy/04.mp3','枉凝眉 '],
['https://wj1.zp68.com:812/lxx/yunhua/2023/01/17/yy/05.mp3','二泉映月 '],
['https://wj1.zp68.com:812/lxx/yunhua/2023/01/17/yy/06.mp3','绣金匾 '],
['https://wj1.zp68.com:812/lxx/yunhua/2023/01/17/yy/07.mp3','乌苏里船歌 '],
['https://wj1.zp68.com:812/lxx/yunhua/2023/01/17/yy/08.mp3','孟姜女 '],
['https://wj1.zp68.com:812/lxx/yunhua/2023/01/17/yy/09.mp3','春江花月夜 '],
['https://wj1.zp68.com:812/lxx/yunhua/2023/01/17/yy/10.mp3','江河水 '],
['https://wj1.zp68.com:812/lxx/yunhua/2023/01/17/yy/11.mp3','说聊斋 '],
['https://wj1.zp68.com:812/lxx/yunhua/2023/01/17/yy/12.mp3',' 月光下的凤尾竹 '],
];
HCPlayer({
m_ar: m_ar,
mlist_css: '--color1: lightgreen; --color2: orange; top: 50; right: 850;',
fs_btn: 'left: 20px; top: 20px; background: #33684e;',
});
})();
</script>
古筝独奏（曹筱红 毛丽华）《纯乐古筝-传统古曲珍藏版Vol.1》[百度]
专辑中文名: 纯乐古筝 传统古曲珍藏版Vol.1
专辑英文名: The Acoustic Collection of Zithar
艺术家: 曹筱红 毛丽华
唱片公司：广州音像出版社
发行时间: 2002年
资源格式: APE+CUE
专辑介绍：
纯乐古筝 传统古曲珍藏版
古筝倾情演绎,精心录制,豪放跌宕,清丽委婉,舒展惬意,意味无穷,经典收藏
筝之美,其色纯,色素,意远。中音之厚重,游荡丝弦间,高贵原色飘。
信手慢弹起古筝,似那泉迷戏流水,林中听细雨,雨后闻大地般清凉透彻畅。
古筝的古朴典雅、恬静柔美,让人荡气回肠,回味无穷。传统古曲深厚的情感与纯乐古筝互融中古色古香的演绎,在平静与安详中如涓涓细流般流入心田,带来一种独特的清透与滋润。
专辑曲目：
01.紫竹调 Tune of purple bamboo
02.梁祝 he butterfly lovers
03.小河淌水 Flowing creek
04.枉凝眉 For the perfect couple
05.二泉映月 The moon reflects the er spring
06.绣金匾 Embroider golden plaque
07.乌苏里船歌 Chanty of wusuli
08.孟姜女 Lady Meng Jiang
09.春江花月夜 Moonlight of spring river
10.江河水 Abyss of misery
11.说聊斋 Telling stories of ghosts
12.月光下的凤尾竹 Phoenix tail bamboo in the moonlight
https://pic.imgdb.cn/item/63d0cfe8588a5d166c326ef5.jpg
https://pic.imgdb.cn/item/63d0d030588a5d166c32cea8.jpg
https://pic.imgdb.cn/item/63d0d016588a5d166c32aa41.jpg @风中飞尘
谢谢小风一直以来的帮助，因为身体的原因，还帮我做了春节贺帖，非常感谢{:4_179:} 谢谢黑黑的专辑教程分享@马黑黑
全屏欣赏的框还是在灯笼旁边，没有移动，这次黑黑的这个专辑小辣椒捣鼓了许多时间，不知道为什么我修改了位子，播放器就逃走了，捣鼓许久的。。。。。。现在没有改播放器大小和位子
是不是在中间那段封装代码设置了什么，我改不好只能这样了 非常喜欢的一个古筝专辑，一下子做了2个，一个黑黑的代码播放器，一个是H5播放器，因为喜欢，所以就做了2个{:4_173:} 俺来听蹭歌儿来啦。这些歌曲都是俺是分喜欢的。谢谢小辣椒朋友，谢谢小风。 梦油 发表于 2023-1-25 15:16
俺来听蹭歌儿来啦。这些歌曲都是俺是分喜欢的。谢谢小辣椒朋友，谢谢小风。
谢谢梦油支持~~{:4_187:} 黑黑，还真玄乎了，我改了时间代码把白的改了绿颜色，发论坛居然出来一个白，一个绿，我自己电脑预览是好的{:4_203:} 是不是我颜色修改有错误，代码问题？
{ grid-area: cur; color: #33684e; }#dur { grid-area: dur; color: #33684e; } 我上传后发论坛也是尺寸搞不明白了，尺寸不对了
这个是颜色改好的，上传出来一个白，一个绿了
https://mp3.wf/00.html 古典的美，给我们一种 感官享受。 庶民来了 发表于 2023-1-25 15:37
古典的美，给我们一种 感官享受。
谢谢双胞胎欣赏{:4_187:} 小辣椒 发表于 2023-1-25 15:41
谢谢双胞胎欣赏
小辣椒很有趣的。 小辣椒 发表于 2023-1-25 15:27
黑黑，还真玄乎了，我改了时间代码把白的改了绿颜色，发论坛居然出来一个白，一个绿，我自己电脑预览是好的 ...
我看到二个都是白色的啊 制作真漂亮，辣椒每次的动感元素特出彩 绿叶清舟 发表于 2023-1-25 16:16
我看到二个都是白色的啊
清舟现在我改过来的，那个下面的链接发论坛是一个白，一个蓝 庶民来了 发表于 2023-1-25 15:52
小辣椒很有趣的。
谢谢双胞胎欣赏， 送你一个章章{:4_189:} 醉了！{:5_162:} 小辣椒 发表于 2023-1-25 15:25
谢谢梦油支持~~
我现在还在听着。我很喜欢这些歌曲。谢谢你！
页:
[1]
2