在.css工作表中访问waveform.png以使用webkit-mask？

Question

基于自定义播放器示例，我构建了我自己的播放器。我使用了minimal-player模板。

设置好播放器后，我开始定制设计(color.css、structure.css、标准、css)。

但是现在我被卡住了..我发现我不能改变波形的背景颜色，除非我使用webkit或waveform.js。

webkit对我来说应该很好……

我唯一的问题是，我不知道如何访问我的index.html或*.css文件中的track.waveform_url。

我知道它的内部波形容器div，但我需要url

  .wavekit{
    -webkit-mask-box-image: url(**IN HERE!!!**);
    background: #81D8D0;
    height: 280px;
    width: 100%;
    bottom: 0px;
    position: fixed;
  }

在我的样式表中..

遗憾的是，我不能提供链接，因为它只在我的硬盘驱动器上

有没有人能帮帮我？非常感谢你

Answer 1

好吧，这很麻烦，但经过几次尝试，我还没有找到更好的方法来获得波形URL。

我的想法是，对于第一次播放，有一个正在触发的'ajaxSuccess'事件，对于下一次播放，有一个'scPlayer:onAudioReady'事件。关键是图像的DOM只在某个时刻由插件生成，所以我们需要一个像事件一样的“钩子”来确定图像是否已经存在于DOM中。

$(document).bind('ajaxSuccess scPlayer:onAudioReady', function () {
    // get image from DOM of player 
    // it will be re-set every next play
    console.log($('.sc-waveform-container > img').attr('src'));
    $('.wavekit').style({
      '-webkit-mask-box-image': $('.sc-waveform-container > img').attr('src')
    });
});

下面是工作示例http://jsbin.com/uhofom/2/edit (仅在Chrome中测试)

自定义播放器项目已经过时，可能不会得到太多关注。从JavaScript的角度来看，它的当前状态并不是很容易扩展。

我的建议是使用像Audio5JS或SoundManager2这样的东西来播放音乐，并拥有自定义的HTML和CSS。要获得实际的声音或集合数据，您可以查询我们的HTTP API或使用SoundCloud JavaScript SDK。然后，您将拥有包含所有数据(包括波形API )的适当对象，并且可以更好地控制该过程。