javascript - 在 html5 中使用 javascript/jQuery 制作类似 Soundcoud Player 的波形

Question

我想让一个音频播放器看起来像 Soundcloud 播放器，并使用 javascript/jQuery 和 html5 canvas 从 mp3 文件制作波形。我知道 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>

我已经在网络上发现了很多脚本，但没有一个看起来像 soundcloud 播放器。

我在网上找到的链接列表，但与我正在搜索的不完全一样:

• https://github.com/AlexJuca/SpectrumVisualizer
• https://github.com/michaeldzjap/waveplayer.js?files=1
• https://github.com/katspaugh/wavesurfer.js

感谢所有可以帮助我的人，并感谢您的建议。

😊😊😊

Answer 1

如果你想像 soundcloud 那样做，请不要忘记，无论多么困难，你都只是一个副本。 将两部分分开。 使用波形构建该播放器。 其次，让你的光标看起来像一个指针，无论你点击哪里，你都可以根据你在歌曲中的百分比发表评论。 抱歉，因为我是法国人，但这样想我想你会更容易理解你必须做什么!

看看这个:http://preview.codecanyon.net/item/audio-waveform-player-with-playlist/full_screen_preview/18420897?_ga=2.157064376.2056415136.1512709641-883454457.1511933135