首頁猿問是否可以設(shè)置html5音頻標(biāo)簽的樣式？

是否可以設(shè)置html5音頻標(biāo)簽的樣式？

Html5

森林海 2019-08-27 11:11:29

是否可以設(shè)置html5音頻標(biāo)簽的樣式？我沒有找到任何有關(guān)如何做到這一點(diǎn)的資源。像改變玩家顏色這樣簡單的事情會很好:)

查看完整描述

3 回答

GCT1015

TA貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超4個贊

是! 帶有“controls”屬性的HTML5音頻標(biāo)簽使用瀏覽器的默認(rèn)播放器。您可以根據(jù)自己的喜好自定義它，不使用瀏覽器控件，而是滾動自己的控件并通過javascript與音頻API通信。

幸運(yùn)的是，其他人已經(jīng)做到了這一點(diǎn)。我現(xiàn)在最喜歡的球員是jPlayer，它很有風(fēng)格，效果很好?？纯催@個。

反對回復(fù) 2019-08-27

月關(guān)寶盒

TA貢獻(xiàn)1772條經(jīng)驗(yàn) 獲得超5個贊

<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

反對回復(fù) 2019-08-27

哆啦的時光機(jī)

TA貢獻(xiàn)1779條經(jīng)驗(yàn) 獲得超6個贊

是的：您可以隱藏內(nèi)置瀏覽器UI（通過刪除controls屬性audio），然后構(gòu)建您自己的界面并使用Javascript（源）控制播放：

<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），并根據(jù)需要設(shè)置樣式。

MDN HTMLAudioElement API參考

反對回復(fù) 2019-08-27