訪問使用webkit-mask的.css表單內的波形。

基於自定義播放器示例構建我自己的播放器。我使用了最小玩家模板。訪問使用webkit-mask的.css表單內的波形。

後，我成立了球員像我希望它是，我開始定製設計（color.css，structure.css，標準，CSS）

，但現在我堅持不好.. 我發現我不能改變波形的背景顏色，除非我使用webkit或waveform.js。

WebKit的應該做的很好，我...

我唯一的問題是，我不知道如何接取的track.waveform_url既不我的index.html或* .css文件。

我知道它的內部波形div容器，但我需要的URL

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

我的樣式表內..

可悲的是，我不能，因爲它只是在我的硬盤驅動器提供一個鏈接，但

有人可以幫我在這裏嗎？非常感謝你

來源

2013-03-20 user2086584

嗯，這是非常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在內的所有數據的適當對象，並且可以更好地控制過程。

來源

2013-03-21 16:12:19

訪問使用webkit-mask的.css表單內的波形。

回答

相關問題