执著 发表于 2024-3-12 21:55

临摹马黑黑老师：带歌词同步的mPlayer- 红枣树

本帖最后由 执著 于 2024-3-13 10:28 编辑 <br /><br /><style>
#papa {
      margin: 0 0 0 calc(50% - 950px);
      display: grid;
      place-items: center;
      width: 1487px;
      height: 800px;
      background: url('https://pic.imgdb.cn/item/65f10c829f345e8d037a9a67.jpg');
      overflow: hidden;
      position: relative;
}

</style>

<div id="papa"></div>
   
<script>
const sf = document.createElement('script');
sf.src = 'https://638183.freep.cn/638183/web/api/mplayer.js';
sf.charset = 'utf-8';
document.body.appendChild(sf);

sf.onload = () => {
      const myplayer = new mPlayer();
      myplayer.setAudSrc('https://od.lk/s/NzBfMTY1MDM3MTNf/105-%E4%BB%BB%E5%A6%99%E9%9F%B3-%E7%BA%A2%E6%9E%A3%E6%A0%91.mp3');
      myplayer.setBtnCss(`
                background: url('https://pic.imgdb.cn/item/65f0435a9f345e8d03cb466f.png') no-repeat center/cover;
                bottom: 20px;
      `);
      myplayer.setLrcCss('top:20px; center; color: tan; --bg: orange;');
      myplayer.lrcAr =[
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ];
};
</script>

执著 发表于 2024-3-12 22:05

怎么不能自动播放？我在代码编辑时浏览了，可以呀？请大师们赐教！谢谢

小辣椒 发表于 2024-3-12 22:11

看了代码，是音乐http://mywlkj.ddns.net:5212/f/YJnUq/105-%E4%BB%BB%E5%A6%99%E9%9F%B3-%E7%BA%A2%E6%9E%A3%E6%A0%91.mp3链接没有到S

小辣椒 发表于 2024-3-12 22:14

非常漂亮的制作。很成功的，花潮的链接后面带s的

执著 发表于 2024-3-12 22:18

小辣椒 发表于 2024-3-12 22:14
非常漂亮的制作。很成功的，花潮的链接后面带s的

老师你看到是自动播放吗？我怎么没有看到自动播放啊？

小辣椒 发表于 2024-3-12 22:21

执著 发表于 2024-3-12 22:05
怎么不能自动播放？我在代码编辑时浏览了，可以呀？请大师们赐教！谢谢
给你换了网易的链接，音乐歌词可以出来，因为不是同一个人唱的，歌词没有很同步，但你可以看明白音乐怎么用

https://music.163.com/song/media/outer/url?id=1911849301.mp3

亦是金 发表于 2024-3-12 22:21

我能听到歌曲的，myplayer.setAudSrc('https://music.163.com/song/media/outer/url?id=1911849301.mp3

小辣椒 发表于 2024-3-12 22:22

执著 发表于 2024-3-12 22:18
老师你看到是自动播放吗？我怎么没有看到自动播放啊？

电脑可以预览，花潮论坛是https 格式的安全模式链接，你http链接是看不见也是听不到的

执著 发表于 2024-3-12 22:23

小辣椒 发表于 2024-3-12 22:11
看了代码，是音乐链接没有到S

没有明白老师是什么意思？链接没有到S？

小辣椒 发表于 2024-3-12 22:24

亦是金 发表于 2024-3-12 22:21
我能听到歌曲的，myplayer.setAudSrc('https://music.163.com/song/media/outer/url?id=1911849301.mp3

前辈晚上好，这个链接我换上去的

小辣椒 发表于 2024-3-12 22:24

执著 发表于 2024-3-12 22:23
没有明白老师是什么意思？链接没有到S？

你看看音乐链接，我给你加的是https 格式，你的是http 格式

执著 发表于 2024-3-12 22:31

小辣椒 发表于 2024-3-12 22:24
你看看音乐链接，我给你加的是https 格式，你的是http 格式

恍然大悟，谢谢老师！我直接弄的外链地址，而且在代码编辑浏览时也完全正常，太感谢老师了！

执著 发表于 2024-3-12 22:32

亦是金 发表于 2024-3-12 22:21
我能听到歌曲的，myplayer.setAudSrc('https://music.163.com/song/media/outer/url?id=1911849301.mp3

谢谢老师临帖，请多多指教！背景图好像太大了

小辣椒 发表于 2024-3-12 22:33

执著 发表于 2024-3-12 22:31
恍然大悟，谢谢老师！我直接弄的外链地址，而且在代码编辑浏览时也完全正常，太感谢老师了！

不客气哦，学习的很不错，就是现在这样感觉同步效果不是很好了

执著 发表于 2024-3-12 22:34

小辣椒 发表于 2024-3-12 22:24
你看看音乐链接，我给你加的是https 格式，你的是http 格式

另外，好像图片太大了，对不？

小辣椒 发表于 2024-3-12 22:35

执著 发表于 2024-3-12 22:34
另外，好像图片太大了，对不？

背景图大没关系啊，只要出来速度不慢就可以

红影 发表于 2024-3-12 23:26

很漂亮的制作。欣赏执著好帖{:4_187:}
页: [1]
查看完整版本: 临摹马黑黑老师：带歌词同步的mPlayer- 红枣树