1

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

在我按照自己的意愿设置播放器后，我开始自定义设计（color.css、structure.css、standard、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;
  }

在我的样式表里面..

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

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

4

1 回答 1

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/uhodom/2/edit（仅在 Chrome 中测试）

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

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

于 2013-03-21T16:12:19.850 回答