[html] html5 오디오 태그를 스타일링 할 수 있습니까?
그렇게하는 방법에 대한 리소스를 찾지 못했습니다. 플레이어의 색상을 변경하는 것만 큼 간단한 것이 있으면 좋을 것입니다. 🙂
답변
예! “controls”속성이있는 HTML5 오디오 태그는 브라우저의 기본 플레이어를 사용합니다. 브라우저 컨트롤을 사용하지 않고 자신의 컨트롤을 롤링하고 자바 스크립트를 통해 오디오 API와 대화하여 원하는대로 사용자 지정할 수 있습니다.
다행히 다른 사람들이 이미이 작업을 수행했습니다. 지금 제가 가장 좋아하는 플레이어는 jPlayer 이며 스타일 이 매우 좋으며 훌륭하게 작동합니다. 확인 해봐.
답변
<audio>
audio::-webkit-media-controls-panel
audio::-webkit-media-controls-mute-button
audio::-webkit-media-controls-play-button
audio::-webkit-media-controls-timeline-container
audio::-webkit-media-controls-current-time-display
audio::-webkit-media-controls-time-remaining-display
audio::-webkit-media-controls-timeline
audio::-webkit-media-controls-volume-slider-container
audio::-webkit-media-controls-volume-slider
audio::-webkit-media-controls-seek-back-button
audio::-webkit-media-controls-seek-forward-button
audio::-webkit-media-controls-fullscreen-button
audio::-webkit-media-controls-rewind-button
audio::-webkit-media-controls-return-to-realtime-button
audio::-webkit-media-controls-toggle-closed-captions-button답변
예 : 기본 제공 브라우저 UI를 숨기고 (에서 controls속성을 제거하여 audio) 대신 고유 한 인터페이스를 빌드하고 자바 스크립트 ( 소스 )를 사용하여 재생을 제어 할 수 있습니다 .
<audio id="player" src="vincent.mp3"></audio>
<div>
<button onclick="document.getElementById('player').play()">Play</button>
<button onclick="document.getElementById('player').pause()">Pause</button>
<button onclick="document.getElementById('player').volume += 0.1">Vol +</button>
<button onclick="document.getElementById('player').volume -= 0.1">Vol -</button>
</div>그런 다음 CSS를 사용하여 원하는대로 요소의 스타일을 지정할 수 있습니다.
답변
태그의 모양은 브라우저에 따라 다르지만 태그를 숨기고 고유 한 인터페이스를 구축하고 Javascript를 사용하여 재생을 제어 할 수 있습니다.
답변
일부 색상 조정
audio {
filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(12%);
width: 200px;
height: 25px;
}답변
HTML5 오디오 요소와 인터페이스하는 고유 한 플레이어를 만들어야합니다. 이 튜토리얼은 http://alexkatz.me/html5-audio/building-a-custom-html5-audio-player-with-javascript/
답변
Ken도 옳았습니다.
css태그 :
audio {
}결과를 얻을 수 있습니다. 플레이어가 25px보다 크거나 작은 높이를 원하지 않는 것 같지만 너비는 어느 정도까지 줄이거 나 늘릴 수 있습니다.
이것은 나에게 충분했습니다. 다음 예를 참조하십시오 (경고, 오디오가 자동으로 재생 됨) : www.thenewyorkerdeliinc.com
