gpt4 book ai didi

javascript - Canvas mask 帮助/自定义音频播放器洗涤器/波形

转载 作者:行者123 更新时间:2023-11-28 00:23:33 27 4
gpt4 key购买 nike

我有两张 png,一张白色,一张红色。

<img class="rangeHorizontal" id="seek"     src="http://i.imgur.com/hRHH9VO.png">
<img id="seekFill" src="http://i.imgur.com/WoJggN0.png">

当歌曲不播放时,它应该是白色的,当歌曲播放时,它应该随着歌曲的进行而填充红色,并且当分别向后和向前滑动时,它应该填充红色。

我已经能够搞定除 Canvas 部分之外的大部分播放功能。

目前,这两个 png 是相互叠加的,当歌曲播放时,整个红色 png 叠加在顶部,.. 而不是只显示一部分,.. 很难解释,但我有一个 fiddle ,所以事情变得更加清晰。

https://jsfiddle.net/tallgirltaadaa/q9qgyob0/

想要的结果就像这个播放器一样,它也使用了两个png的方法:

http://codecanyon.net/item/zoomsounds-neat-html5-audio-player/full_screen_preview/4525354?ref=hkeyjun

如果有人能帮我一点,我会很高兴的。整个早上我一直在遮盖并尝试使用 Canvas ,但没有成功。

最佳答案

需要执行的代码有点太多,但这里有一种可以用来绘制图像的剪辑版本的技术。根据需要实现 -

实例

每次时间更新:

  • Canvas 已清除
  • 绘制了白色底部图像(您可以根据需要缩放它们)
  • 计算进度(当前时间/持续时间)
  • 红顶图像是使用裁剪参数绘制的:

即。

ctx.drawImage(image, sx, sy, sw, sh,  dx, dy, dw, dh);

完整示例代码(由于 API 使用而必须替换音乐)-

var imgBg = new Image(),
imgFg = new Image(),
count = 2;
imgBg.onload = imgFg.onload = init;
imgBg.src = "http://i.imgur.com/hRHH9VO.png";
imgFg.src = "http://i.imgur.com/WoJggN0.png";

function init() {
if (--count) return; // makes sure both images are loaded

var canvas = document.querySelector("canvas"),
ctx = canvas.getContext("2d"),
audio = document.querySelector("audio");

canvas.width = imgBg.naturalWidth;
canvas.height = imgBg.naturalHeight;

render();

audio.volume = 0.5;
audio.addEventListener("timeupdate", render);

function render() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(imgBg, 0, 0);

// calc progress
var pst = audio.currentTime / audio.duration;

// draw clipped version of top image
if (pst > 0) {
ctx.drawImage(imgFg, 0, 0, (canvas.width * pst)|0, canvas.height, // source
0, 0, (canvas.width * pst)|0, canvas.height); // dst
}
}
}
body {background:#ccc}
canvas {width:600px;height:auto}
<audio src="https://raw.githubusercontent.com/epistemex/free-music-for-test-and-demo/master/music/kf_colibris.mp3" controls></audio>
<canvas></canvas>

关于javascript - Canvas mask 帮助/自定义音频播放器洗涤器/波形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29759717/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com