试验帖 --- AAP模板

起个网名好难 · 发表于 2024-8-31 09:25

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由起个网名好难于 2024-9-1 20:42 编辑

起个网名好难 · 发表于 2024-8-31 09:25

本帖最后由起个网名好难于 2024-8-31 11:18 编辑

<link rel="stylesheet" type="text/css" href="https://file.uhsea.com/2408/af6f7c52dbe1052a4b3acf8c8458715cTF.css">
<style>
#oBlk {
width:1200px;height:720px; max-height:800px;position:relative;overflow:hidden; border-radius:32px; box-shadow:4px 4px 8px black;
margin:80px 0 40px calc(50% - 681px);
}
#amazingaudioplayer-1 {display:block;position:absolute;left:80px; top:42px;width:300px;height:164px; border-radius:16px 16px 0 0; box-shadow:2px 2px 6px black;}
.amazingaudioplayer-info {color: #39f; font-weight:500;}
#amazingaudioplayer-1 .amazingaudioplayer-tracklist-container {background-image:linear-gradient(to bottom, transparent 0%, hsla(240, 30%, 100%, 0.7));}
#vid {
position: absolute;
width: 1360px;
left:0px; bottom:0px;
}
</style>
<div id="oBlk">
<video id="vid" src="https://img.tukuppt.com/video_show/3664703/00/01/99/5b4ec1eadde6f.mp4" loop autoplay muted ></video>
<div id="amazingaudioplayer-1">
<ul class="amazingaudioplayer-audios" style="display:none;">
</ul>
</div>
</div>
<script>
{
// 依次加载外部 js 文件
let sf0 = document.createElement('script');
sf0.type = 'text/javascript';
sf0.src = 'https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js';
sf0.onload = function (){
console.log('load jquery');
let sf1 = document.createElement('script');
sf1.type = 'text/javascript';
sf1.src = 'https://lkvv.obs.cn-south-1.myhuaweicloud.com/mlqs/mlqs/audioplayerengine/amazingaudioplayer.js';
sf1.onload = function (){
console.log('load amazingaudioplayer');
let sf2 = document.createElement('script');
sf2.type = 'text/javascript';
sf2.src = 'https://lkvv.obs.cn-south-1.myhuaweicloud.com/mlqs/mlqs/audioplayerengine/initaudioplayer-1.js';
sf2.onload = function (){
console.log('load initaudioplayer-1');
}
document.head.appendChild(sf2);
}
document.head.appendChild(sf1);
}
document.head.appendChild(sf0);
// 歌曲条目信息
let opts = [
{
artist:"",
title:"喜洋洋",
album:"民乐合奏十大名曲",
info:"",
image:"http://p2.music.126.net/JaZmH6IiYhkO8tX1zQGlDw==/82463372100808.jpg",
duration:"0",
src:"https://music.163.com/song/media/outer/url?id=5271919.MP3", type:"audio/mpeg"
},
{
artist:"",
title:"春江花月夜",
album:"民乐合奏十大名曲",
info:"",
image:"http://p2.music.126.net/JaZmH6IiYhkO8tX1zQGlDw==/82463372100808.jpg",
duration:"0",
src:"https://music.163.com/song/media/outer/url?id=5271920.MP3", type:"audio/mpeg"
},
{
artist:"",
title:"花好月圆",
album:"民乐合奏十大名曲",
info:"",
image:"http://p2.music.126.net/JaZmH6IiYhkO8tX1zQGlDw==/82463372100808.jpg",
duration:"0",
src:"https://music.163.com/song/media/outer/url?id=5271921.MP3", type:"audio/mpeg"
},
{
artist:"",
title:"翠湖春晓",
album:"民乐合奏十大名曲",
info:"",
image:"http://p2.music.126.net/JaZmH6IiYhkO8tX1zQGlDw==/82463372100808.jpg",
duration:"0",
src:"https://music.163.com/song/media/outer/url?id=5271922.MP3", type:"audio/mpeg"
},
{
artist:"",
title:"金蛇狂舞",
album:"民乐合奏十大名曲",
info:"",
image:"http://p2.music.126.net/JaZmH6IiYhkO8tX1zQGlDw==/82463372100808.jpg",
duration:"0",
src:"https://music.163.com/song/media/outer/url?id=5271923.MP3", type:"audio/mpeg"
},
{
artist:"",
title:"春节序曲",
album:"民乐合奏十大名曲",
info:"",
image:"http://p2.music.126.net/JaZmH6IiYhkO8tX1zQGlDw==/82463372100808.jpg",
duration:"0",
src:"https://music.163.com/song/media/outer/url?id=5271917.MP3", type:"audio/mpeg"
},
{
artist:"",
title:"瑶族舞曲",
album:"民乐合奏十大名曲",
info:"",
image:"http://p2.music.126.net/JaZmH6IiYhkO8tX1zQGlDw==/82463372100808.jpg",
duration:"0",
src:"https://music.163.com/song/media/outer/url?id=5271918.MP3", type:"audio/mpeg"
},
{
artist:"",
title:"苏武牧羊",
album:"民乐合奏十大名曲",
info:"",
image:"http://p2.music.126.net/JaZmH6IiYhkO8tX1zQGlDw==/82463372100808.jpg",
duration:"0",
src:"https://music.163.com/song/media/outer/url?id=5271928.MP3", type:"audio/mpeg"
},
{
artist:"",
title:"紫竹调",
album:"民乐合奏十大名曲",
info:"",
image:"http://p2.music.126.net/JaZmH6IiYhkO8tX1zQGlDw==/82463372100808.jpg",
duration:"0",
src:"https://music.163.com/song/media/outer/url?id=5271929.MP3", type:"audio/mpeg"
},
{
artist:"",
title:"喜讯到边寨",
album:"民乐合奏十大名曲",
info:"",
image:"http://p2.music.126.net/JaZmH6IiYhkO8tX1zQGlDw==/82463372100808.jpg",
duration:"0",
src:"https://music.163.com/song/media/outer/url?id=5271930.MP3", type:"audio/mpeg"
},
];
// 构造菜单条目
let ulObj = oBlk.querySelector('.amazingaudioplayer-audios');
opts.forEach(opt => {
let liObj = document.createElement('li');
liObj.dataset.artist = opt.artist;
liObj.dataset.title = opt.title;
liObj.dataset.info = opt.info;
liObj.dataset.album = opt.album;
liObj.dataset.image = opt.image;
liObj.dataset.duration = opt.duration;
let divObj = document.createElement('div');
divObj.dataset.src = opt.src;
divObj.dataset.type = opt.type;
divObj.className = "amazingaudioplayer-source";
liObj.appendChild(divObj);
ulObj.appendChild(liObj);
});
// 背景视频启停
oBlk.onclick = () => {vid.paused ? vid.play() : vid.pause();}
}
</script>