[html] html5 오디오 태그를 스타일링 할 수 있습니까?

Html / 글쓴이

그렇게하는 방법에 대한 리소스를 찾지 못했습니다. 플레이어의 색상을 변경하는 것만 큼 간단한 것이 있으면 좋을 것입니다. 🙂

답변

예! “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

참조 : https://chromium.googlesource.com/chromium/blink/+/72fef91ac1ef679207f51def8133b336a6f6588f/Source/core/css/mediaControls.css?autodive=0%2F%2F%2F

답변

예 : 기본 제공 브라우저 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를 사용하여 원하는대로 요소의 스타일을 지정할 수 있습니다.

MDN HTMLAudioElement API 참조

답변

태그의 모양은 브라우저에 따라 다르지만 태그를 숨기고 고유 한 인터페이스를 구축하고 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