是否可以設計html5音頻標籤？

Question

我還沒有找到任何有關如何做到這一點的資源......即使更改播放器的顏色也不錯:)

Answer 1

是的！帶有「controls」屬性的HTML5音頻標籤使用瀏覽器的默認播放器。您可以通過不使用瀏覽器控件來自定義它，但是可以通過JavaScript來滾動自己的控件並與音頻API交談。

幸運的是，其他人已經這樣做了。我現在最喜歡的球員是jPlayer，它非常有風格，效果很棒。一探究竟。

Answer 2

標記的外觀依賴於瀏覽器，但是您可以隱藏它，構建您自己的界面並使用Javascript控制播放。

Answer 3

要更改播放的只是顏色，簡單地解決了音頻標籤在你的CSS文件，比如在（白白）我的網站的玩家成爲無形的一個，所以我說：

audio { 
    background-color: #95B9C7; 
} 

這將玩家變成淺藍色。

Answer 4

如果你想樣式瀏覽器的CSS標準的音樂播放器：

audio { 
    enter code here; 
} 

Answer 5

肯有它正確的爲好。

一個css標籤：

audio { 

} 

將會給你一些結果。似乎它不希望玩家高於或低於25px的任何高度，但寬度可以縮短或延長到一定程度。

這對我來說已經足夠了;看到這個例子（警告，音頻自動播放）：www.thenewyorkerdeliinc.com

Answer 6

你必須創建你自己的播放器，與HTML5音頻元素接口。本教程將幫助http://alexkatz.me/html5-audio/building-a-custom-html5-audio-player-with-javascript/

Answer 7

<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 

Answer 8

是：你可以隱藏內置的瀏覽器UI（通過從audio的controls屬性），而是建立自己的界面和使用Javascript（source）控制回放：

<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 + button s），然後根據需要添加樣式。

其他屬性& HTMLAudioElement的方法JavaScript接口可以找到here。