月满西楼
<style>#papa { margin: 0 0 0 calc(50% - 622px); width: 1080px; height: 699px; background: gray url('https://638183.freep.cn/638183/t22/webp/ymxl.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; position: relative; z-index: 1; }
#mplayer { position: absolute; top: 20px; cursor: pointer; }
#bb { position: absolute; left: 140px; width: 60px; height: 80px; background: linear-gradient(15deg,tan,red); border-radius: 50%; transform: skew(5deg); cursor: pointer; opacity: .85; transition: .25s; }
</style>
<div id="papa">
<canvas id="mplayer"></canvas>
<span id="bb" title="换个地址" onclick="javascript: aud.src='https://www.kumeiwp.com/sub/filestores/2022/12/15/eff8b4893d9868dd74e0f6c21f5fd86a.mp3'"></span>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1324441790.mp3" autoplay></audio>
</div>
<script>
(function() {
ypData = ;
let total = 50,idx = 0;
let ctx = mplayer.getContext('2d');
let w = mplayer.width = 800, h = mplayer.height = 100;
let slice = w / ypData.length, vmax = Math.max.apply(null, ypData);
let colors = ['red','pink'];
aud.loop = false;
mplayer.onmousemove = (e) => { mplayer.title = e.offsetY < h * 0.8 ? toMin(aud.duration * e.offsetX / w) : '暂停/播放'; };
mplayer.onclick = (e) => {
if(e.offsetY < h * 0.8) {
let ac = aud.duration * e.offsetX / w;
idx = Math.round(ypData.length * ac / aud.duration);
aud.currentTime = ac;
} else {
aud.paused ? aud.play() : aud.pause();
}
}
aud.addEventListener('ended', () => { idx = 0; aud.play(); });
aud.addEventListener('timeupdate', () => {
idx = Math.round(ypData.length * aud.currentTime / aud.duration)
if(idx > ypData.length - 1) idx = ypData.length - 1;
draw();
});
let draw = () => {
ctx.clearRect(0,0,w,h);
ctx.strokeStyle = colors;
ctx.fillStyle = colors;
ctx.font = '14px sans-serif';
ctx.shadowOffsetX = ctx.shadowOffsetY = 1;
ctx.shadowBlur = 2;
ctx.shadowColor = '#555';
ctx.textAlign = 'center';
ctx.beginPath();
for(j = 0; j <= idx; j ++) {
ctx.lineTo(slice*j, h - ypData * h / vmax);
}
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = colors;
for(j = idx + 1; j < ypData.length; j ++) {
ctx.lineTo(slice*j, h - ypData * h / vmax);
}
ctx.stroke();
ctx.fillText((aud.paused ? '播放 ' : '暂停 ') + toMin(aud.currentTime) + ' / ' + toMin(aud.duration), w/2, h*0.95);
bb.style.top = 'calc(50% - ' + ypData + 'px)';
};
let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;};
draw();
})();
</script> <style>
#papa { margin: 0 0 0 calc(50% - 459px); width: 1080px; height: 699px; background: gray url('https://638183.freep.cn/638183/t22/webp/ymxl.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; position: relative; z-index: 1; }
#mplayer { position: absolute; top: 20px; cursor: pointer; }
#bb { position: absolute; left: 140px; width: 60px; height: 80px; background: linear-gradient(15deg,tan,red); border-radius: 50%; transform: skew(5deg); cursor: pointer; opacity: .85; transition: .25s; }
</style>
<div id="papa">
<canvas id="mplayer"></canvas>
<span id="bb" title="换个地址" onclick="javascript: aud.src='https://www.kumeiwp.com/sub/filestores/2022/12/15/eff8b4893d9868dd74e0f6c21f5fd86a.mp3'"></span>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1324441790.mp3" autoplay></audio>
</div>
<script>
(function() {
//音频数据略 ypData = ;
let total = 50,idx = 0;
let ctx = mplayer.getContext('2d');
let w = mplayer.width = 800, h = mplayer.height = 100;
let slice = w / ypData.length, vmax = Math.max.apply(null, ypData);
let colors = ['red','pink'];
aud.loop = false;
mplayer.onmousemove = (e) => { mplayer.title = e.offsetY < h * 0.8 ? toMin(aud.duration * e.offsetX / w) : '暂停/播放'; };
mplayer.onclick = (e) => {
if(e.offsetY < h * 0.8) {
let ac = aud.duration * e.offsetX / w;
idx = Math.round(ypData.length * ac / aud.duration);
aud.currentTime = ac;
} else {
aud.paused ? aud.play() : aud.pause();
}
}
aud.addEventListener('ended', () => { idx = 0; aud.play(); });
aud.addEventListener('timeupdate', () => {
idx = Math.round(ypData.length * aud.currentTime / aud.duration)
if(idx > ypData.length - 1) idx = ypData.length - 1;
draw();
});
let draw = () => {
ctx.clearRect(0,0,w,h);
ctx.strokeStyle = colors;
ctx.fillStyle = colors;
ctx.font = '14px sans-serif';
ctx.shadowOffsetX = ctx.shadowOffsetY = 1;
ctx.shadowBlur = 2;
ctx.shadowColor = '#555';
ctx.textAlign = 'center';
ctx.beginPath();
for(j = 0; j <= idx; j ++) {
ctx.lineTo(slice*j, h - ypData * h / vmax);
}
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = colors;
for(j = idx + 1; j < ypData.length; j ++) {
ctx.lineTo(slice*j, h - ypData * h / vmax);
}
ctx.stroke();
ctx.fillText((aud.paused ? '播放 ' : '暂停 ') + toMin(aud.currentTime) + ' / ' + toMin(aud.duration), w/2, h*0.95);
bb.style.top = 'calc(50% - ' + ypData + 'px)';
};
let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;};
draw();
})();
</script>
代码
这个应该算沙发~~~我的{:4_174:} 先仔细欣赏一下{:4_205:} 黑黑这个播放器按钮用了是那个可以增加音乐的实例效果？ 我点击了几次音乐一样的 做了换个音乐是点击小红太阳？ 凤凰塔上大月亮出来，小红太阳下山了{:4_189:} 月满西楼非常经典的一首古风音乐。特别这古筝演奏，特别喜欢 黑黑辛苦，每天一个新作品，也是新教程，太厉害的{:4_178:} 这个音乐停止，频谱停止，就是播放器滚动条了{:4_199:} 没有歌词可以秒做，晚上完成作业{:4_189:} 小辣椒 发表于 2022-12-16 10:46
没有歌词可以秒做，晚上完成作业
还是要做一下那个音频数据数组 小辣椒 发表于 2022-12-16 10:38
我点击了几次音乐一样的
同一支曲子两个地址 小辣椒 发表于 2022-12-16 10:44
这个音乐停止，频谱停止，就是播放器滚动条了
示波图的上部分（80%），调节播放进度；下部分（20%），播放/暂停控制 小辣椒 发表于 2022-12-16 10:31
这个应该算沙发~~~我的
{:4_181:} 小辣椒 发表于 2022-12-16 10:31
先仔细欣赏一下
示波图还是挺好看的，随着播放进度的推进，红色示波一点点覆盖粉色的，可以看一看 马黑黑 发表于 2022-12-16 11:42
还是要做一下那个音频数据数组
这个纯音音频也是要做数据的{:4_181:} 小辣椒 发表于 2022-12-16 10:37
黑黑这个播放器按钮用了是那个可以增加音乐的实例效果？
与音乐的一个音频律动关联 马黑黑 发表于 2022-12-16 11:43
同一支曲子两个地址
必须要2个地址？