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

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 클래스를 요소 (이 경우 div+ buttons)에 추가하고 원하는대로 스타일을 지정할 수 있습니다.

MDN HTMLAudioElement API 참조

---

태그의 모양은 브라우저에 따라 다르지만 태그를 숨기고 고유 한 인터페이스를 구축하고 Javascript를 사용하여 재생을 제어 할 수 있습니다.

---

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

audio {
    background-color: #95B9C7;
}

이것은 플레이어를 하늘색으로 변경했습니다.

---

Ken도 옳았습니다.

css태그 :

audio {

}

결과를 얻을 수 있습니다. 플레이어가 25px보다 크거나 작은 높이를 원하지 않는 것 같지만 너비는 어느 정도까지 줄이거 나 늘릴 수 있습니다.

this was good enough for me; see this example (warning, audio plays automatically): www.thenewyorkerdeliinc.com

---

You have to create your own player that interfaces with the HTML5 audio element. This tutorial will help http://alexkatz.me/html5-audio/building-a-custom-html5-audio-player-with-javascript/

---

some color tunings

audio {
    filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(12%);
    width: 200px;
    height: 25px;
}

---

If you want to style the browsers standard music player in the CSS:

audio {
    enter code here;
}

참고URL : https://stackoverflow.com/questions/4126708/is-it-possible-to-style-html5-audio-tag