访问.css 表中的waveform.png 以使用webkit-mask？答案

【问题标题】：access waveform.png inside .css sheet to use webkit-mask?访问.css 表中的waveform.png 以使用webkit-mask？
【发布时间】：2013-03-20 19:34:31
【问题描述】：

基于自定义播放器示例即时构建我自己的播放器。我使用了最小播放器模板。

按照我想要的方式设置播放器后，我开始自定义设计（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;
  }

在我的样式表里面..

很遗憾，我无法提供链接，因为它只在我的硬盘上

有人可以帮我吗？非常感谢

【问题讨论】：

标签： webkit soundcloud waveform

【解决方案1】：

嗯，这很 hacky，但经过几次尝试，我还没有找到更好的方法来获取波形 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 UI。要获取实际的声音或设置数据，您可以查询我们的 HTTP API 或使用SoundCloud JavaScript SDK。然后，您将拥有包含所有数据（包括波形 API）的适当对象，并且可以更好地控制过程。

【讨论】：