朵拉 发表于 2023-10-9 19:50

寻（马黑黑原创）

本帖最后由 朵拉 于 2023-10-9 19:57 编辑 <br /><br /><style>
#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://pic.imgdb.cn/item/6523e9d3c458853aef5f19cf.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px black; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
</style>

<div id="papa">
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=865460203" autoplay loop></audio>
</div>

<script>
      
(function() {
      let lrcAr = [ , , ];
      let js1 = 'https://638183.freep.cn/638183/web/api/svg_path_lrc.js',
                js2 = 'https://638183.freep.cn/638183/web/lizi/h5lz_2d.js';
      let loadJs = (url,callback) => {
                let body = document.querySelector('body'), jsNode = document.createElement('script');
                jsNode.charset = 'utf-8';
                jsNode.setAttribute('src', url);
                body.appendChild(jsNode);
                jsNode.onload = () => callback();
      };
      loadJs(js1, () => {
                HCPlayer({
                        papa: '#papa',
                        lrcAr: lrcAr,
                        lrc_css: 'top: 20px;',
                        fs_css: 'color: #eee; background: transparent;',
                        player_css: 'width: 200px; height: 120px; bottom: 10px;',
                        path: 'M100 5 Q-50 160 190 5',
                        btn: {left: 34, top: 80},
                        track: {track: 'lightblue', prog: '#eee'},
                        img: {
                              play: 'https://638183.freep.cn/638183/t23/btn/play2.png',
                              pause: 'https://638183.freep.cn/638183/t23/btn/pause2.png'
                        }
                });
      });

      loadJs(js2, () => {
                H5lz({
                        papa: '#papa',
                        total: 60,
                        size: {width: 12, height: 20},
                        shape: {background: 'rgba(138,0,0,.7)', borderRadius: '0 100%'},
                        ani: 'toBottom',
                        maxTime: 30,
                        offset: {x: 100, y: 0},
                });
      });
})();

</script>

朵拉 发表于 2023-10-9 19:58

@马黑黑
马师 晚上好，学生交作业，请指正哈~~{:4_190:}

马黑黑 发表于 2023-10-9 20:07

朵拉 发表于 2023-10-9 19:58
@马黑黑
马师 晚上好，学生交作业，请指正哈~~

很漂亮，欣赏

红影 发表于 2023-10-9 20:09

这个使用歌曲，应该可以做个歌词同步的呢。欣赏朵宝好帖{:4_204:}

朵拉 发表于 2023-10-9 20:12

马黑黑 发表于 2023-10-9 20:07
很漂亮，欣赏

谢谢马师欣赏{:4_190:}

马黑黑 发表于 2023-10-9 20:12

朵拉 发表于 2023-10-9 20:12
谢谢马师欣赏

多尝试，大胆一点

朵拉 发表于 2023-10-9 20:13

红影 发表于 2023-10-9 20:09
这个使用歌曲，应该可以做个歌词同步的呢。欣赏朵宝好帖

谢谢影宝，我是手机 编辑同步歌词不太方便{:4_204:}

朵拉 发表于 2023-10-9 20:30

马黑黑 发表于 2023-10-9 20:12
多尝试，大胆一点

学生明白，谢谢马师懂我~~{:4_190:}

马黑黑 发表于 2023-10-9 20:33

朵拉 发表于 2023-10-9 20:30
学生明白，谢谢马师懂我~~

{:4_190:}

红影 发表于 2023-10-9 20:42

朵拉 发表于 2023-10-9 20:13
谢谢影宝，我是手机 编辑同步歌词不太方便

是的，手机的确不太方便的呢{:4_204:}

小文 发表于 2023-10-10 07:56

漂亮，欣赏
页: [1]
查看完整版本: 寻（马黑黑原创）