草稿练习本

小九

小九

<style>
#papa { margin: auto; width: 700px; height: 420px; background: gray; 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=1325131432.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-2 10:50
请教黑黑： 我找到更换音乐代码的地方， 但图片地址更换是在什么地方呢？ @马黑黑

帖子的父框，papa，在CSS里加背景：

#papa { margin: auto; width: 700px; height: 420px; background: gray; box-shadow: 3px 3px 20px #000; position: relative; }

↓

#papa { margin: auto; width: 700px; height: 420px; background: gray url('图片地址') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; }

红影

九儿的也发成功了，恭喜。只要把图片替换上去就可以

小辣椒

小九的学习帖

泡沫

歌好听，没看到图。手机

小九

小九

<style>
#papa { margin: auto; width: 850px; height: 500px; background: gray; box-shadow: 3px 3px 20px #000; position: relative; }

</style>

<div id="papa">
#papa { margin: auto; width: 850px; height:500px;&#160;background: gray; box-shadow: 3px 3px 20px #000; position: relative; }

↓

#papa { margin: auto; width: 850px; height: 500px;&#160;background: gray&#160;url('https://www.huachaowang.com/forum.php?mod=attachment&aid=NDM4MzZ8N2M3NmI5YTZ8MTY3MjgzMjgxOHw2NzY2fDY1MDA2&noupdate=ye
') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; }


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

<script>
(function() {
&#160; &#160;&#160; &#160;&#160;&#160;(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);
&#160; &#160;&#160; &#160;&#160;&#160;HCPlayer({});
})();
</script>

小九

@马黑黑   黑黑帮忙看看代码
第1楼和13楼，是一样的代码，不清楚哪里出错了

马黑黑

小九 发表于 2023-1-4 19:57
@马黑黑   黑黑帮忙看看代码
第1楼和13楼，是一样的代码，不清楚哪里出错了

你要弄清楚的是，同一个页面，不能使用相同的代码。原因是，好比一个房间，只有一个小九，不会存在两个或以上的小九。<div id="papa">...</div> 里的红色部分，表明 div 盒子的身份，papa 字面上是爸爸的意思，它是唯一的，在一个页面里面，只能有一个。

现在，你清楚问题出在哪儿了吗？

小九

马黑黑 发表于 2023-1-5 19:02
你要弄清楚的是，同一个页面，不能使用相同的代码。原因是，好比一个房间，只有一个小九，不会存在两个或 ...

还是一团乱麻

马黑黑

小九 发表于 2023-1-5 19:09
还是一团乱麻

你不能在同一个页面里这么发布这些代码。好比你，不能同时出现在家里所有的房间。清楚了么

小九

马黑黑 发表于 2023-1-5 19:11
你不能在同一个页面里这么发布这些代码。好比你，不能同时出现在家里所有的房间。清楚了么

这个清楚了，就是代码搞不清

马黑黑

小九 发表于 2023-1-5 19:19
这个清楚了，就是代码搞不清

代码需要一点一点消化，不能一蹴而就

小九

马黑黑 发表于 2023-1-5 20:11
代码需要一点一点消化，不能一蹴而就

嗯嗯，好的，明白了