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

참조 : 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

플레이어의 색상 만 변경하려면 css 파일의 오디오 태그를 지정하기 만하면됩니다. 예를 들어 내 사이트 중 하나에서 플레이어가 보이지 않게되어 (흰색 바탕에 흰색) 다음을 추가했습니다.

audio {
    background-color: #95B9C7;
}

이로 인해 플레이어가 하늘색으로 변경되었습니다.

예, 가능합니다. @ Fábio Zangirolami 답변에서

audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
                background-color: red;
}

CSS에서 브라우저 표준 음악 플레이어의 스타일을 지정하려면 :

audio {
    enter code here;
}