html5 오디오 플레이어를 사용자 정의하는 방법

Question

나는 html5 오디오 플레이어을하고 있으므로 맞춤식 플레이어를 사용하려고합니다. 기본 <audio> 태그 인터페이스를 사용하고 싶지 않습니다. 나는 선수를 위해 내 자신의 html/css 스타일을하고 싶다.

내 실제 코드는 사람이 선수의 스타일을 편집 할 수있는 방법을 알고, 또는이 플레이어를 실행하기 위해 내 자신의 HTML/CSS 코드를 사용하는 일을 하는가

if('webkitAudioContext' in window) { 
    var myAudioContext = new webkitAudioContext(); 
    } 

    request = new XMLHttpRequest(); 
    request.open('GET', 'http://96.47.236.72:8364/;', true); 
    request.responseType = 'arraybuffer'; 
    request.addEventListener('load', bufferSound, false); 
    request.send(); 

    function bufferSound(event) { 
     var request = event.target; 
     var source = myAudioContext.createBufferSource(); 
     source.buffer = myAudioContext.createBuffer(request.response, false); 
     source.connect(myAudioContext.destination); 
     source.noteOn(0); 
    } 

http://jsfiddle.net/EY54q/1/

을 (그것은 작동)?

Answer 1

자신 만의 스타일을 만들 수 있습니다. controls 옵션을 잊어 버리면됩니다 (간단히 controls을 사용할 수 있고 controls="controls"을 사용할 필요가 없습니다). 그냥 버튼/div의/어떤 스타일을 작성하고 오디오 인터페이스 제어하는 ​​EventListener를 추가

HTML :

<button id="playpause">play 
    <!--you can style the content with anything!--> 
</button> 
<audio id="player"> 
    <source src="http://96.47.236.72:8364/;" /> 
</audio> 

JS : 내가 볼

window.player = document.getElementById('player'); 
document.getElementById('playpause').onclick = function() { 
    if (player.paused) { 
     player.play(); 
     this.innerHTML = 'pause'; 
    } else { 
     player.pause(); 
     this.innerHTML = 'play'; 
    } 
} 

http://jsfiddle.net/LqM9D/1/

을 당신은 또한 오디오 API를 사용하고 있습니다. 버퍼에 오디오 파일을 덤프 할 수는 없습니다. 원시 PCM으로 디코딩해야합니다. 이것은 많은 시간이 소요됩니다.

window.AudioContext = window.AudioContext||window.webkitAudioContext; 
context = new AudioContext(); 

편집 :

페이지 할 수있는 좀 더 크로스 브라우저를 만들려면

var source = context.createMediaElementSoure(player); //we defined player in the first block of code 

: 정말 쉬운 방법은 오디오 요소에 링크 된 소스 노드를 만드는 것입니다 I think you want to know what else you can do with the element. 타임 라인 용 슬라이더와 볼륨 슬라이더/음소거 버튼을 만들 수도 있습니다. 후자 두 가지가 필터 라인의 끝 부분에있는 게인 노드에서 그렇게하는 것을 선호합니다.

Answer 2

예. "그림자 돔"을 통해 가능합니다. 브라우저에서이 기능을 활성화하고 도착할 요소에 대한 스타일을 작성하면됩니다.

내가 understend - 브라우저 특정 기능입니다. 그러나 웹 킷 기반의 "그림자 돔"스타일링은 완벽하게 작동합니다. 많은 정보가 없지만이 기능은 이미 전체적으로 사용되었습니다. 예를 들어 다음 질문을 참조하십시오. Why do no user-agents implement the CSS cursor style for video elements 관리자가 표시되면 그림자 돔을 표시 할 수있게 설정하면 작동 방법을 알 수 있습니다. (선택자 목록이있는 공개 목록도 있음 - https://gist.github.com/afabbro/3759334)

다른 브라우저의 경우 "shadow dom"으로 작업하는 지원을 확인해야합니다.