本帖最后由 我来自他乡 于 2025-6-14 07:40 编辑
这个楼层的 aplayer 播放器代码都是上传到微风音乐网盘，如果想要使用这个播放器，可以下载下边的zip压缩文件，解压后修改滚动歌词、歌曲名称、歌手名称、音乐链接和图片地址。
如果不想下载压缩文件，也可以用下边的代码，复制代码保存为html后缀文件。
- <link href="https://s4.zstatic.net/ajax/libs/aplayer/1.10.1/APlayer.min.css" rel="stylesheet">
- <style type="text/css">
- .aplayer {
- background:#fff url() 65px -8px repeat-x !important;}
- #postmessage_37985{
- font-size: 22px;
- color: #8c888b;
- background: -webkit-linear-gradient(45deg,#00f2ff,#ff5200,#ffd300,#4000ff,#006bff);
- -moz-linear-gradient(45deg,#00f2ff,#ff5200,#ffd300,#4000ff,#006bff);
- -ms-linear-gradient(45deg,#00f2ff,#ff5200,#ffd300,#4000ff,#006bff);
- color: transparent;
- -webkit-background-clip: text;
- animation: ran 50s linear infinite;
- }
- @keyframes ran {
- from {
- backgroud-position: 0 0;
- }
- to {
- background-position: 9000px 0;
- }
- }
- .aplayer-author {
- color: #8c888b;
- background: -webkit-linear-gradient(45deg,#00f2ff,#ff5200,#ffd300,#4000ff,#006bff);
- -moz-linear-gradient(45deg,#00f2ff,#ff5200,#ffd300,#4000ff,#006bff): ;
- -ms-linear-gradient(45deg,#00f2ff,#ff5200,#ffd300,#4000ff,#006bff): ;
- color: transparent;
- -webkit-background-clip: text;
- animation: ran 250s linear infinite;
- }
- .aplayer-author {
- border-bottom: 1px solid skyblue;
- border-image: -webkit-linear-gradient(left,#FF9B9B 30%,#FFB90F 20%,#FFB90F 40%,#29ACE5 40%,#29ACE5 60%,#29ACE5 60%,#29ACE5 80%,#3CB371 80%,#3CB371 100%,grey 100%) 1 1;
- line-height: 25px;
- display: inline;
- *display: inline;
- *zoom: 1;
- margin-bottom: 3px;
- }
- .aplayer-title {
- color: #8c888b;
- background: -webkit-linear-gradient(45deg,#00f2ff,#ff5200,#ffd300,#4000ff,#006bff);
- -moz-linear-gradient(45deg,#00f2ff,#ff5200,#ffd300,#4000ff,#006bff): ;
- -ms-linear-gradient(45deg,#00f2ff,#ff5200,#ffd300,#4000ff,#006bff): ;
- color: transparent;
- -webkit-background-clip: text;
- animation: ran 250s linear infinite;
- }
- .aplayer-title {
- border-bottom: 1px solid skyblue;
- border-image: -webkit-linear-gradient(left,#FF9B9B 30%,#FFB90F 20%,#FFB90F 40%,#29ACE5 40%,#29ACE5 60%,#29ACE5 60%,#29ACE5 80%,#3CB371 80%,#3CB371 100%,grey 100%) 1 1;
- line-height: 25px;
- display: inline;
- *display: inline;
- *zoom: 1;
- margin-bottom: 3px;
- }
- #container{
- width: 0; /*设置为0 隐藏自定义菜单*/
- height: 125px;
- overflow: hidden; /*隐藏溢出的元素*/
- }
- .aplayer .aplayer-pic img {
- height:100%!important;
- width:100%!important;
- }
- </style>
- <div id='aplayer'>
- <div id="player" class="aplayer">
- <pre class="aplayer-lrc-content">
- 这里添加滚动歌词，从[00:00.00]开始到音乐结束。
- </pre>
- </div>
- </div>
- <script src="https://s4.zstatic.net/ajax/libs/aplayer/1.10.1/APlayer.min.js"></script>
- <script >
- var ap = new APlayer
- ({
- element: document.getElementById('aplayer'),
- autoplay: true,
- theme: '#FADFA3',
- volume: 0.7,
- showlrc: true,
- audio: [
- {
- title: '这里添加歌曲名称',
- author: '这里添加歌手名字',
- url: '这里添加音乐链接地址',
- pic: '这里添加图片地址',
- }
- ]
- });
- ap.init();
- </script>
下面是微风音乐网盘的音乐播放器示例：
诺爷Plus的---就让冷风吹
|
雷达卡
发表于 2025-6-6 10:46
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
分享
收藏
顶
踩
提升卡
变色卡
抢沙发
千斤顶
显身卡
又是好玩歌曲。
