朵拉 发表于 2022-12-4 22:32

神魂颠倒

本帖最后由 朵拉 于 2022-12-7 00:23 编辑 <br /><br /><style>
#papa { left: -214px; position: relative; width: 1024px; height: 640px;

background: url('https://pic.imgdb.cn/item/638f6c48b1fccdcd36ed75d2.jpg') no-repeat center/cover;

box-shadow: 8px 4px 32px 0 hsla( 0,0%,0%,.72); user-select: none; }



#tit { position: absolute; left: 0; top: 0; padding: 10px 16px; font: bold 2em sans-serif; color: tan; text-shadow: 1px 2px 4px #000; transition: color .5s; }
#tit:hover { color: tan; }
</style>

<div id="papa">
      <span id="tit">神魂颠倒</span>
</div>
<audio id="aud" src="https://aimg8.dlssyht.cn/u/0/ueditor/file/0/0/1670172877418143.mp3" autoplay loop crossorigin="anonymous"></audio>

<script>
(function() {
      (function(mkPlayer) {let defaults = { player_css: 'left: calc(50% - 100px); bottom: 0;',playerCode: '<canvas id="mplayer" height="200" width="200" style="position: absolute; cursor: pointer;"></canvas>',};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;let ballSize = data.size;mplayer.style.cssText += data.player_css;let context = new AudioContext;let source = context.createMediaElementSource(aud);let analyser = context.createAnalyser();source.connect(analyser);analyser.connect(context.destination);let output = new Uint8Array(361);let length = analyser.frequencyBinCount * 44100 / context.sampleRate | 0;let output2 = new Uint8Array(length);let cxt = mplayer.getContext("2d");(function draw() {let ppColor = cxt.createLinearGradient(0,0,mplayer.width-100,mplayer.height);ppColor.addColorStop(0, 'hsl(180,100%,50%)');ppColor.addColorStop(0.8, 'hsl(120,100%,45%)');ppColor.addColorStop(1, 'hsl(60,90%,35%)');analyser.getByteFrequencyData(output);cxt.clearRect(0, 0, mplayer.width, mplayer.height);for (j = 0; j < output.length; j++) {let value = output / 10;cxt.strokeStyle = value > 20 ? "darkorange" : "tan";cxt.beginPath();cxt.lineWidth = 1;cxt.moveTo(100, 100);cxt.lineTo(Math.cos((j * 0.5 + 90) / 180 * Math.PI) * (60 + value) + 100, (- Math.sin((j * 0.5 + 90) / 180 * Math.PI) * (60 + value) + 100));cxt.stroke();cxt.beginPath();cxt.lineWidth = 1;cxt.moveTo(100, 100);cxt.lineTo((Math.sin((j * 0.5) / 180 * Math.PI) * (60 + value) + 100), -Math.cos((j * 0.5) / 180 * Math.PI) * (60 + value) + 100);cxt.stroke();}cxt.beginPath();cxt.lineWidth = 1;cxt.arc(100, 100, 60, 0, 2 * Math.PI, false);cxt.fillStyle = ppColor;cxt.stroke();cxt.fill();analyser.getByteTimeDomainData(output2);let height = 100, width = 120;cxt.beginPath();cxt.strokeStyle = "tan";for (j = 0; j < width; j++) {cxt.lineTo(j + 40, 100 - (height / 2 * (output2 / 256 - 0.5)));}cxt.stroke();requestAnimationFrame(draw);})();mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();};mkPlayer.HCPlayer = playCode;})(this);
      HCPlayer({});
})();
</script>

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

这个没有音乐出来？

朵拉 发表于 2022-12-4 22:58

@马黑黑
马师好 请看过来：
用酷美的音乐链接没音乐，怎么回事{:4_190:}

马黑黑 发表于 2022-12-4 23:32

朵拉 发表于 2022-12-4 22:58
@马黑黑
马师好 请看过来：
用酷美的音乐链接没音乐，怎么回事

酷美不开放跨域操作

朵拉 发表于 2022-12-4 23:34

马黑黑 发表于 2022-12-4 23:32
酷美不开放跨域操作

酷美不开放，哪里开放可以操作？

马黑黑 发表于 2022-12-4 23:42

朵拉 发表于 2022-12-4 23:34
酷美不开放，哪里开放可以操作？
对，它开放音乐资源的外链，但这个播放器需要跨域读取源数据，它拒绝这个。下面这个坛开放跨域，注册一下就可以免费上传音乐，你看一下它的说明就能操作：


朵拉 发表于 2022-12-5 23:14

@马黑黑
马师好，请教 背景图片语句不知晓了{:4_190:}{:4_173:}

朵拉 发表于 2022-12-5 23:16

编辑到神魂颠倒~~{:4_173:}

马黑黑 发表于 2022-12-6 23:56

朵拉 发表于 2022-12-5 23:14
@马黑黑
马师好，请教 背景图片语句不知晓了

图片在 #papa 那里，自己加：

#papa { left: -214px; position: relative; width: 1024px; height: 640px; background: url('图片地址') no-repeat center/cover; box-shadow: 8px 4px 32px 0 hsla( 0,0%,0%,.72); user-select: none; }
页: [1]
查看完整版本: 神魂颠倒