重寫 Audio 樣式

眾所周知，html5 已經可以很好的支援 audio 和 vedio 了，我們可以方便的在網頁新增多**控制項。然而，設計師總是與眾不同，修改 audio 預設樣式已成常態。

一、audio 結構

123

45

controls="controls"

preload="auto">
src="jartto.ogg"
type="audio/ogg" />
src="jartto.***"
type="audio/mpeg" />
your browser does not support the audio element.
audio>

二、屬性一覽

更多詳情，請參考文件：html5 audio 標籤

三、問題窘境

當我們開啟開發者工具審查audio元素的時候，除了audio標籤，什麼也看不到。這時候，肯定有人想這麼改：

123

audio 

然而，並沒有什麼卵用。

四、最終方案

答案是肯定的，我們來覆寫 audio 內建的一些全域性樣式，如：

123

4567
891011
1213
1415
1617
1819
2021
2223
2425
2627
2829

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

嗯，意思很明了，就這麼幹。看起來並沒有什麼挑戰，這僅僅只是開始！

五、新的問題

我們碰到了新的問題，具體如下：

六、繼續探索

首先，突破點在於能否找到乙個pause的樣式類，來解決上述問題一。

其次，play 和 pause 如何觸發互換。

css樣式重寫，英文超出

樣式重寫 charset utf 8 重寫 a a hover htmlhtml html button moz focus inner html body body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,leg...

Audio 混音演算法

1 輸入兩路16bit 音訊，分別0.5倍增益後混音。2 左聲道audio 1sample 乘以 0.5 倍增益，右聲道 audio 1 sample 乘以 0.5倍增益 左聲道audio 2 sample 乘以 0.5 倍增益，右聲道 audio 2 sample 乘以 0.5倍增益 3 控制每個...

audio 進度條拉不動 audio進度條

如上圖所示 為效果圖 如下 音訊控制進度條 body,padding 0 margin 0 m main 1000 function settimeshow t t math.floor t var playtime secondtomin audio.currenttime size html p...