-1
javascript/jQueryとhtml5 canvasを使用してmp3ファイルで作成された波形のSoundcloudプレーヤーのように見せたいと思います。私はこれを作ったが、それは本当に素敵ではありませんhtml5でjavascript/jQueryを使用したSoundcoud Playerのような波形にする
...私はstackoverflowの上の私のような質問がたくさんあることを知っているが、誰も本当の答えを見つけることができません。
var imgBg = new Image(),
imgFg = new Image(),
count = 2;
imgBg.onload = imgFg.onload = init;
imgBg.src = "http://www.filetolink.com/605b7afaa1";
imgFg.src = "https://files.fm/thumb_show.php?i=5ddxxmmn";
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; background:#CCCCCC}<audio src="https://failiem.lv/down.php?i=puupmmqb" controls=""></audio>
<canvas height="238" width="1470"></canvas>私はすでにウェブarroundのスクリプトの多くが見つかりましたが、誰がてSoundcloud選手のように見えるん。
私が探してるまったく同じ私はウェブ上で発見ではなく、リンクの一覧：
- https://github.com/AlexJuca/SpectrumVisualizer
- https://github.com/michaeldzjap/waveplayer.js?files=1
- https://github.com/katspaugh/wavesurfer.js
を助けることができるすべての人に感謝します私はあなたのアドバイスに感謝します。