|
|

楼主 |
发表于 2024-8-31 09:25
|
显示全部楼层
本帖最后由 起个网名好难 于 2024-8-31 11:18 编辑
- <!-- 引入外部 CSS 设置 -->
- <link rel="stylesheet" type="text/css" href="https://file.uhsea.com/2408/af6f7c52dbe1052a4b3acf8c8458715cTF.css">
- <!-- 自定义的 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>
- <!-- HTML 代码 -->
- <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>
- <!-- JS 代码 -->
- <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>
复制代码 |
|