试验帖 --- AAP模板

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

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

<meta http-equiv="content-type" content="text/html;charset=utf-8"/>


<link rel="stylesheet" type="text/css" href="https://file.uhsea.com/2408/af6f7c52dbe1052a4b3acf8c8458715cTF.css">


<style>
#oBlk {
width:1200px;height:700px; position:relative;overflow:hidden; border-radius:32px; box-shadow:4px 4px 8px black; margin:40px 0 40px calc(50% - 681px);
}
#amazingaudioplayer-1 {display:block;position:absolute;left:50px; top:32px;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%, gray 100%);}
#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');
jQuery.noConflict();
let sf1 = document.createElement('script');
sf1.type = 'text/javascript';
sf1.src = 'https://file.uhsea.com/2409/96ad9b14238aa462c17ffb430d2effb7F8.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);
// 歌曲条目信息
var 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>

起个网名好难 发表于 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>

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

[*]AAP 即 Amazing Audiop Player，用代码做个大致能通用的模板；
[*]外部CSS设置可以用 link 标签引入；
[*]本论坛不认用script标签引入的外部js文件，用js代码依次加载多个外部的js（有点慢）；
[*]添加歌曲只要添加opts里的歌曲参数条目即可；
[*]这次是直接贴代码不知效果如何，请大家指正。

红影发表于 2024-8-31 10:26

好像评分没法评呢，刚开始的视频也会运行后自动停下，需要点击过播放器上任一按钮，然后视频正常了。
完全是自己的感觉，不知道说得对不对。哎呀，表情也点不出了，好像把论坛功能给封印住了

红影发表于 2024-8-31 10:28

这个APP很漂亮，难难研究辛苦了！

红影发表于 2024-8-31 10:29

又发现个问题，每次跟帖，都重新开始了，不是在已经听到位置上了。

红影发表于 2024-8-31 10:30

我是有什么说什么，难难别生气。你这么辛苦做研究，我还说这些。
不过你想收集信息，肯定需要我们说出所有感受。

起个网名好难 发表于 2024-8-31 10:53

红影发表于 2024-8-31 10:26
好像评分没法评呢，刚开始的视频也会运行后自动停下，需要点击过播放器上任一按钮，然后视频正常了。
完全 ...

看来还是没成功，影响了论坛的一些原有功能。
视频也不太正常，不能自动播放点一下才正常。

谢谢你的反馈信息！

起个网名好难 发表于 2024-8-31 10:54

红影发表于 2024-8-31 10:28
这个APP很漂亮，难难研究辛苦了！

看来还得继续努力{:5_102:}

起个网名好难 发表于 2024-8-31 10:56

红影发表于 2024-8-31 10:29
又发现个问题，每次跟帖，都重新开始了，不是在已经听到位置上了。

大概是每次发布跟帖就刷新了帖子，于是重新开始。

起个网名好难 发表于 2024-8-31 10:57

红影发表于 2024-8-31 10:30
我是有什么说什么，难难别生气。你这么辛苦做研究，我还说这些。
不过你想收集信息，肯定需要我们说出所有 ...

这有什么好气的，都不说我才郁闷呢{:5_102:}

梦江南 发表于 2024-8-31 15:26

老师，评分点不动。

梦江南 发表于 2024-8-31 15:28

歌曲可以随意点放的。

梦江南 发表于 2024-8-31 15:33

歌曲一唱，视频效果就停止了。

红影发表于 2024-8-31 15:49

奇怪，看难难能点击“回复”进行回帖，我点不动，只能跟在下面回复了。

红影发表于 2024-8-31 15:50

梦江南说得对，歌曲是可以任意点击的，播放也很流畅。

红影发表于 2024-8-31 15:52

“论坛不认用script标签引入的外部js文件”
估计都是这个原因造成的吧。

起个网名好难 发表于 2024-8-31 16:56

梦江南发表于 2024-8-31 15:26
老师，评分点不动。

就是啊，这就是个不完善的地方。

起个网名好难 发表于 2024-8-31 16:57

梦江南发表于 2024-8-31 15:28
歌曲可以随意点放的。

帖子本身反应倒还正常

起个网名好难 发表于 2024-8-31 16:59

梦江南发表于 2024-8-31 15:33
歌曲一唱，视频效果就停止了。

不会吧，视频点一下启动了再点一下就停了，是不是点了不止一下。

页: [1] 2 3

花潮论坛's Archiver

试验帖 --- AAP模板