论坛 › 欢乐水吧 › 试贴

樵歌 发表于 2022-12-4 10:19

试贴

<style>
#papa { margin: auto; width: 700px; height: 420px; background: gray url('https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2251926242,2519140039&fm=173&app=49&f=JPEG?w=640&h=444&s=C210CC2057F27B841E9055C40100C0B3') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; }
</style>
<div id="papa">
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=118075.mp3" autoplay loop></audio>
<script>
(function() {
      (function(mkPlayer) {let defaults = {player_css: 'bottom: 10px; left: calc(50% - 50px);',playerCode: `<style>#mplayer { position: absolute; --track: hsla(100,30%,80%,.65); --prog: hsla(100,60%,40%,.55); }#btnwrap { display: block; fill: var(--track); opacity: .95; cursor: pointer; }#btnwrap:hover { opacity: 1; }#track { fill: none; stroke: var(--track); }#prog { fill: none; stroke: var(--prog); }</style><svg id="mplayer" width="100" height="100"><g id="circle_wrap" transform="rotate(-90, 50, 50)" style="cursor: pointer;"><circle id="track" cx="50" cy="50" r="40" stroke-width="10" /><circle id="prog" cx="50" cy="50" r="40" stroke-width="10" /></g><g id="btnwrap"><path id="btnplay" d="M 40 40,40 60,60, 50 z"></path><path id="btnpause" d="M 42 40,42 60,47 60,47 40,42 40 z M 50 40,50 60,55 60,55 40,50 40 z" style="display: none;"></path><path d="M 47 50,50 40,50 60,47 60 z" fill="transparent" /></g></svg>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;let cc = { x: 1 * track.getAttribute('cx'), y: 1 * track.getAttribute('cy'), len: track.getTotalLength(), };prog.style.strokeDasharray = prog.style.strokeDashoffset = cc.len;btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();circle_wrap.onclick = (e) => {let deg = Math.atan2(e.offsetY - cc.y, e.offsetX - cc.x) * 180 / Math.PI;deg += (e.offsetX < cc.x && e.offsetY < cc.y) ? 450 : 90;aud.currentTime = aud.duration * deg / 360;};aud.addEventListener('timeupdate', () => {prog.style.strokeDashoffset = cc.len - cc.len * aud.currentTime / aud.duration;});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => aud.play());let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');};mkPlayer.HCPlayer = playCode;})(this);
      HCPlayer({});
})();
</script>

樵歌 发表于 2022-12-4 10:21

@马黑黑，@红影我贴了音乐地址，为何没有声音呢？{:4_198:}

樵歌 发表于 2022-12-4 10:21

<style>
#papa { margin: auto; width: 700px; height:420px; background: gray url('https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2251926242,2519140039&fm=173&app=49&f=JPEG?w=640&h=444&s=C210CC2057F27B841E9055C40100C0B3')no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; }
</style>
<div id="papa">
</div>
<audio id="aud" src=" https://music.163.com/song?id=118075&userid=1375167424.mp3"autoplay loop></audio>
<script>
(function() {
       (function(mkPlayer) {let defaults = {player_css: 'bottom:10px; left: calc(50% - 50px);',playerCode: `<style>#mplayer { position:absolute; --track: hsla(100,30%,80%,.65); --prog: hsla(100,60%,40%,.55);}#btnwrap { display: block; fill: var(--track); opacity: .95; cursor: pointer;}#btnwrap:hover { opacity: 1; }#track { fill: none; stroke: var(--track);}#prog { fill: none; stroke: var(--prog); }</style><svgid="mplayer" width="100" height="100"><gid="circle_wrap" transform="rotate(-90, 50, 50)"style="cursor: pointer;"><circle id="track"cx="50" cy="50" r="40"stroke-width="10" /><circle id="prog"cx="50" cy="50" r="40"stroke-width="10" /></g><gid="btnwrap"><path id="btnplay" d="M 40 40,4060,60, 50 z"></path><path id="btnpause" d="M 4240,42 60,47 60,47 40,42 40 z M 50 40,50 60,55 60,55 40,50 40 z" style="display:none;"></path><path d="M 47 50,50 40,50 60,47 60 z"fill="transparent" /></g></svg>`,};let playCode =(user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML+= data.playerCode;mplayer.style.cssText += data.player_css;let cc = { x: 1 *track.getAttribute('cx'), y: 1 * track.getAttribute('cy'), len:track.getTotalLength(), };prog.style.strokeDasharray =prog.style.strokeDashoffset = cc.len;btnwrap.onclick = () => aud.paused ?aud.play() : aud.pause();circle_wrap.onclick = (e) => {let deg =Math.atan2(e.offsetY - cc.y, e.offsetX - cc.x) * 180 / Math.PI;deg +=(e.offsetX < cc.x && e.offsetY < cc.y) ? 450 : 90;aud.currentTime= aud.duration * deg / 360;};aud.addEventListener('timeupdate', () => {prog.style.strokeDashoffset= cc.len - cc.len * aud.currentTime /aud.duration;});aud.addEventListener('pause', () =>mState());aud.addEventListener('play', () =>mState());aud.addEventListener('seeked', () => aud.play());let mState = ()=> aud.paused ? (btnplay.style.display = 'block', btnpause.style.display ='none') : (btnplay.style.display = 'none', btnpause.style.display ='block');};mkPlayer.HCPlayer = playCode;})(this);
       HCPlayer({});
})();
</script>

樵歌 发表于 2022-12-4 10:23

不知道问题出在哪里{:4_198:}太打击银鸟

红影 发表于 2022-12-4 10:46

樵歌 发表于 2022-12-4 10:23
不知道问题出在哪里太打击银鸟

师兄你比较一下，要用这个换后面数字
https://music.163.com/song/media/outer/url?id=1325131432.mp3
你用的是
https://music.163.com/song?id=118075&userid=1375167424.mp3

这两个是不一样的。让你别的都别动，你还是动了呀{:4_173:}

红影 发表于 2022-12-4 10:49

樵歌 发表于 2022-12-4 10:21
@马黑黑，@红影我贴了音乐地址，为何没有声音呢？

你把音乐链接的代码改了，所以音乐出不来，现在好了，帮你改过来了。

是不是很简单？呵呵，图片可以上传聚合图床的，就不会这么大一串了，小辣椒教过你怎么传图床的啊。{:4_173:}

红影 发表于 2022-12-4 10:52

师兄你可以把网易云的地址放上记事本上，还有图片地址。
然后复制原来的所有代码，先把图片地址替换，再把网易云的数字换上去（别的别动），就可以了。
师兄赶紧再做一个，下次肯定可以了{:4_173:}

马黑黑 发表于 2022-12-4 12:14

音乐地址不能直接用wyyyy的网页地址，要拼接一下，里面有套路的，所有的音乐地址都是这样：
https://music.163.com/song/media/outer/url?id=118075&userid=1375167424.mp3

只需在wyyyy的网页地址里找到id=xxxxxxx，把等号后面的 xxxxxxx 数字替换上面 id= 后面的数字即可

樵歌 发表于 2022-12-4 13:00

红影 发表于 2022-12-4 10:46
师兄你比较一下，要用这个换后面数字

你用的是


是不是把网易云里面歌曲地址复制在一边，只用那歌曲地址里面的ID=XXXXXX就可以了。也就是说，小黑那行音乐代码双“”内不动，只改那数字是吧{:4_203:}

樵歌 发表于 2022-12-4 13:03

红影 发表于 2022-12-4 10:49
你把音乐链接的代码改了，所以音乐出不来，现在好了，帮你改过来了。

是不是很简单？呵呵，图片可以上 ...

我只是右键点了图片复制链接然后赶回那图片隐号内，没想到上传图床这回事。

樵歌 发表于 2022-12-4 13:03

红影 发表于 2022-12-4 10:52
师兄你可以把网易云的地址放上记事本上，还有图片地址。
然后复制原来的所有代码，先把图片地址替换，再把 ...

嗯嗯，好像明白点了，师妹真是个好老师。{:4_204:}

樵歌 发表于 2022-12-4 13:05

马黑黑 发表于 2022-12-4 12:14
音乐地址不能直接用wyyyy的网页地址，要拼接一下，里面有套路的，所有的音乐地址 ...

谢谢祖是师爷{:4_176:}我就是直接复制然后直接就贴 在那专管音乐那行里了{:4_203:}

马黑黑 发表于 2022-12-4 13:07

樵歌 发表于 2022-12-4 13:05
谢谢祖是师爷我就是直接复制然后直接就贴 在那专管音乐那行里了

你的地址是网址，不是音乐地址，二者有区别

红影 发表于 2022-12-4 13:28

樵歌 发表于 2022-12-4 13:00
是不是把网易云里面歌曲地址复制在一边，只用那歌曲地址里面的ID=XXXXXX就可以了。也就是说，小黑那行音 ...

对的，如果是网易云的只换数字，因为你复制的不是mp3的。
如果其他音乐后缀是MP3的要整体替换括号里的。师兄只用网易云好了，省得混{:4_173:}

红影 发表于 2022-12-4 13:29

樵歌 发表于 2022-12-4 13:03
我只是右键点了图片复制链接然后赶回那图片隐号内，没想到上传图床这回事。

有些图片有防盗链，不能直接用，还是上传一下的保险。

红影 发表于 2022-12-4 13:30

樵歌 发表于 2022-12-4 13:03
嗯嗯，好像明白点了，师妹真是个好老师。

只换图片，和网易云的数字，特别简单的。{:4_173:}

樵歌 发表于 2022-12-4 13:35

马黑黑 发表于 2022-12-4 13:07
你的地址是网址，不是音乐地址，二者有区别

我是把那歌曲放出来然后点的链接呀。那怎么找音乐地址呀？{:4_198:}

樵歌 发表于 2022-12-4 13:37

红影 发表于 2022-12-4 13:28
对的，如果是网易云的只换数字，因为你复制的不是mp3的。
如果其他音乐后缀是MP3的要整体替换括号里的。 ...

我刚才又试了几次，只换了数字，可帖子出来后，最上面只有个圆播放器，图片音乐统统没有呀{:4_198:}

樵歌 发表于 2022-12-4 13:38

红影 发表于 2022-12-4 13:29
有些图片有防盗链，不能直接用，还是上传一下的保险。

哦，先弄到图床？

红影 发表于 2022-12-4 14:01

樵歌 发表于 2022-12-4 13:35
我是把那歌曲放出来然后点的链接呀。那怎么找音乐地址呀？

就是那个地址，你可以复制地址备用，做帖子时只从地址里取数字。

查看完整版本: 试贴