版主
性别保密
威望 点
注册时间2013-6-25
最后登录1970-1-1
在线时间 小时
好友
UID35002
听众
阅读权限200
- 积分
- 107011
 鲜花( 10538)  鸡蛋( 4)
|
楼主 |
发表于 2024-6-27 16:38
|
显示全部楼层
本帖最后由 那年夏天 于 2024-9-29 12:23 编辑
1.通用版小按钮播放器（全民K歌）
<br><br>
<div align="center" style="position: relative;">
<script type="text/javascript">
document.write("<scr" + "ipt src='http://webftp.bbs.hnol.net/sxrx2016/players/jquery.js'></sc" + "ript>")
document.write("<scr" + "ipt src='http://webftp.bbs.hnol.net/sxrx2016/players/player.js'></sc" + "ript>")
document.write("<scr" + "ipt src='http://webftp.bbs.hnol.net/sxrx2016/players/fineplay/player/fineplay.js'></sc" + "ript>")
</script>
<link href="http://webftp.bbs.hnol.net/sxrx2016/players/fineplay/player/fineplay.css" rel="stylesheet" type="text/css">
<div style="margin:0px auto;">
<div class="fineplays" style="display:block;position:relative;width:100%;max-width:100px;height:auto;margin:0px auto 0px;">
<ul class="player-audios" style="display:none;">
<li data-title="阴天 - 那年夏天">
<div class="player-source" data-type="audio/mpeg" data-src="http://cgi.kg.qq.com/fcgi-bin/fcg_get_play_url?shareid=PfZV0UPimvUF8Pkn">
</div>
</li>
</ul>
</div>
</div>
</div>
<br><br><br>
2.网易云音乐
<ul class="player-audios" style="display: none;">
<li data-title="夏日终曲-蓝心羽">
<div class="player-source" data-type="audio/mpeg" data-src="https://music.163.com/song/media/outer/url?id=2161586969&auto.mp3">
</div>
</li>
</ul>
</div>
3.配音秀
<video controls="" autoplay="" name="media"><source src="https://video7.peiyinxiu.com/download/202406291720a0d47698_175393142.mp4" type="video/mp4"></video>
https://wyc520.com.cn/forum.php?mod=viewthread&tid=415542
4.自制的音乐播放器代码（鱼儿教的）
<style>
#mydiv { margin: 0px 0 0 100px; width: 120px; height:120px; background:#fff url('https://img.wyc520.com.cn/data/attachment/forum/202406/06/224052v3j2z2rx7njqzq8c.png') no-repeat center/cover; border-radius:8% 8%;box-shadow: 2px 2px 6px rgba(0,0,0,.6); overflow: hidden; z-index: 1; position: relative; }
txt-box { position: absolute;margin-left: 85px; margin-top: 85px;display: grid; place-items: center; top: var(--xx); bottom: 10px; width: 25px; height: 25px; font: normal 16px sans-serif; color:Orchid; cursor: pointer; transition: .5s; animation: move 5s var(--delay) linear infinite alternate var(--state); }
txt-box::after { position: absolute; content: '...'; inset: -4px; border: thick outset Mediumpurple; border-radius:50% 50%; animation: rot 5s var(--delay) linear infinite alternate var(--state); }
txt-box:hover { filter: sepia(100%) drop-shadow(0 -80px 10px white); }
#vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 60px);border-radius:50% 50%; object-fit: cover; mix-blend-mode: multiply; opacity: .75; pointer-events: none; }
#vid2 {position: absolute;margin-top: 0px;width: 100%; height: 100%; top:0px;border-radius:50% 50%;transform: rotateY(180deg);object-fit: cover; pointer-events: none; mix-blend-mode: screen;z-index: 5;opacity: .59;}
@keyframes move { to { bottom:0px; } }
@keyframes rot { to { transform: rotateX(365deg); } }
</style>
<div id="mydiv">
<audio id="aud" src="http://cgi.kg.qq.com/fcgi-bin/fcg_get_play_url?shareid=mRJD3HmAPWg2DmqS" autoplay loop></audio>
<img id="vid2" src="https://gd-hbimg.huaban.com/4d3a42272d2760f6deed127346944bd1f12294972a40b6-W51vl4">
</div>
<script>
(function() {
const ar = '夏'.split('');
const total = ar.length, half = Math.floor(ar.length / 2), ww =50;
let tbAr = [];
ar.forEach((t,k) => {
let tbox = document.createElement('txt-box');
tbox.textContent = t;
tbox.style.cssText += `
--xx: ${ww / total * k +1}px;
--delay: -${k < half ? k * 0.5 : (total - k) * 0.5}s;
`;
tbAr.push(tbox);
mydiv.appendChild(tbox);
});
aud.onplaying = aud.onpause = () => {
mydiv.style.setProperty('--state', ['running','paused'][+aud.paused]);
aud.paused ? vid.pause() : vid.play();
tbAr.forEach(tb => tb.title = ['暂停','播放'][+aud.paused]);
};
tbAr.forEach(tb => tb.onclick = () => aud.paused ? aud.play() : aud.pause());
})();
</script>
4.小播放器
<audio style="width:190px;height:64px;" controls="controls" autoplay="autoplay" loop="loop" src="https://music.163.com/song/media/outer/url?id=1316823248" type="audio/mpeg"></audio>
5.手动播放代码
<br>
<audio style="width: 120px; height: 34px;" src="http://cgi.kg.qq.com/fcgi-bin/fcg_get_play_url?shareid=hQeaoKhFNJvQyhEE" loop="loop" controls="controls" type="audio/mpeg"></audio>
<br> |
鲜花鸡蛋风有约 在2024-6-29 20:25 送朵鲜花 并说：我非常同意你的观点，送朵鲜花鼓励一下
|
狗仔卡
发表于 2024-5-25 21:42
提升卡
沉默卡
喧嚣卡
变色卡
抢沙发
显身卡
