webkit-mask를 사용하려면 .css 시트에 액세스 waveform.png?

은 내 플레이어를 만드는 custom-player-examples을 기반으로합니다. 최소 플레이어 템플릿을 사용했습니다. 내가이 원하는처럼 플레이어를 설정 한 후webkit-mask를 사용하려면 .css 시트에 액세스 waveform.png?

, 난 (color.css, structure.css, 표준, CSS)

디자인을 사용자 정의 시작했지만 지금은 내가 .. 심하게 붙어 웹킷이나 waveform.js를 사용하지 않는 한 웨이브 폼의 배경색을 바꿀 수 없다는 것을 알게되었습니다.

웹킷 나를 위해 잘해야 ...

내 유일한 문제는, 내가 내 index.html을 또는 * .CSS 파일도에 track.waveform_url을 ACESS하는 방법을 잘 모릅니다 .

는 슬프게도 나는 아직 때문에 단지 내 하드 드라이브에

을 링크를 제공하지 못할 ..

내가 그것의 내부 파형 컨테이너 사업부를 알고하지만 난 URL 내 스타일 시트 내부

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

필요

누군가 나를 도와 줄 수 있습니까? 감사합니다. verymuch

출처

2013-03-20 user2086584

글쎄, 이것은 매우 해킹이지만, 몇 번의 시도 후에 파형 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

사용자 정의 플레이어 프로젝트가 오래된 아마 많은 관심을받지 않습니다이다. JavaScript의 현재 상태는 JavaScript의 관점에서 확장 할 수 없습니다.

음악을 재생하고 맞춤 HTML과 CSS UI를 사용하려면 Audio5JS 또는 SoundManager2과 같은 것을 사용하는 것이 좋습니다. 실제 소리를 듣거나 데이터를 설정하려면 HTTP API를 쿼리하거나 SoundCloud JavaScript SDK을 사용하십시오. 그럼 당신은 파형 API를 포함한 모든 데이터와 적절한 개체를 가지고 훨씬 더 프로세스를 제어합니다.

출처

2013-03-21 16:12:19

webkit-mask를 사용하려면 .css 시트에 액세스 waveform.png?

답변

관련 문제