我還沒有找到任何有關如何做到這一點的資源......即使更改播放器的顏色也不錯:)是否可以設計html5音頻標籤?
回答
是的!帶有「controls」屬性的HTML5音頻標籤使用瀏覽器的默認播放器。您可以通過不使用瀏覽器控件來自定義它,但是可以通過JavaScript來滾動自己的控件並與音頻API交談。
幸運的是,其他人已經這樣做了。我現在最喜歡的球員是jPlayer,它非常有風格,效果很棒。一探究竟。
你還沒有告訴我們如何定製它。我在這裏找到了一些東西:http://www.theparticlelab.com/building-a-custom-html5-audio-player-with-jquery/ – 2013-12-04 23:09:17
所以答案是「不,這是不可能的,你必須使用外部播放器「? – Fernando 2014-05-19 15:56:52
@Fernando:確實有可能。這回答了這個問題「可能嗎?」 – 2014-05-26 00:57:25
標記的外觀依賴於瀏覽器,但是您可以隱藏它,構建您自己的界面並使用Javascript控制播放。
要更改播放的只是顏色,簡單地解決了音頻標籤在你的CSS文件,比如在(白白)我的網站的玩家成爲無形的一個,所以我說:
audio {
background-color: #95B9C7;
}
這將玩家變成淺藍色。
這不會改變我的播放器的顏色,它只會在背後添加背景色。任何想法爲什麼? – Tom 2013-08-28 08:06:04
導致Visual STudio 2013 ASP.NET WEb App項目掛起,我必須通過Windows任務管理器執行程序結束VS。 – 2014-08-09 22:07:13
如果你想樣式瀏覽器的CSS標準的音樂播放器:
audio {
enter code here;
}
肯有它正確的爲好。
一個css
標籤:
audio {
}
將會給你一些結果。似乎它不希望玩家高於或低於25px的任何高度,但寬度可以縮短或延長到一定程度。
這對我來說已經足夠了;看到這個例子(警告,音頻自動播放):www.thenewyorkerdeliinc.com
你必須創建你自己的播放器,與HTML5音頻元素接口。本教程將幫助http://alexkatz.me/html5-audio/building-a-custom-html5-audio-player-with-javascript/
<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
不好的演示文稿,但有用的CSS選擇器! – 2016-03-15 16:14:18
你可以請示例一個例子如何使用這些?只是示例代碼? – Xsmael 2016-07-23 08:53:56
這隻支持基於webkit的瀏覽器(例如不支持Firefox,IE等) – 2016-10-06 12:35:55
是:你可以隱藏內置的瀏覽器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。
- 1. html5音頻標籤播放音頻時,它是加載音頻
- 2. HTML5音頻標籤與JQuery音頻
- 3. Android設備上的html5音頻標籤
- 4. Html5音頻標籤閃回
- 5. html5音頻標籤是否非官方地包含.mid(MIDI)?
- 6. html5音頻標籤如何添加src?
- 7. HTML5音頻標籤在Chrome 58.0.3029.81
- 8. HTML5音頻標籤 - 啓動和
- 9. 從音頻下載html5標籤
- 10. 做html5音頻標籤吃掉資源
- 11. iPhone,JQTouch和HTML5音頻標籤
- 12. Firefox中的HTML5音頻標籤錯誤
- 13. 是否可以使用html5音頻元素的ttml或vtt?
- 14. 是否可以從HTML5音頻元素獲取Icecast元數據?
- 15. 是否可以用HTML5錄製聲音?
- 16. 如何停止HTML5音頻標籤播放的音頻
- 17. 是否有HTML5音頻的oncomplete事件?
- 18. 移動瀏覽器是否通過HTML5音頻標籤發送httpOnly cookie?
- 19. 是否音頻(MP3)播放,同時用HTML5的AUDO標籤下載
- 20. HTML5音頻標記時間
- 21. 在帶有音頻html5標籤的離子應用程序中播放音頻是否夠用?
- 22. HTML5中的視頻和音頻標籤爲Android
- 23. HTML5音頻可視化?
- 24. 可視化html5音頻
- 25. 在html5視頻標籤中,是否可以按順序播放源標籤中列出的媒體資源?
- 26. 播放無音頻標籤的音頻
- 27. 無法在Android模擬器中使用html5音頻標籤播放音頻
- 28. HTML5視頻標籤IE9
- 29. youtube.com和html5視頻標籤
- 30. HTML5視頻標籤顯示
讓我想起舊Wurlitzers上的節奏按鈕 - 「桑巴舞」,「爵士樂」,「華爾茲」,... – 2010-11-08 18:32:03
不同的瀏覽器對音頻元素的樣式有不同的反應 - http://stackoverflow.com/a/27765938/325251 – mvark 2015-01-04 13:26:50
是的,而且它看起來最糟糕。他們怎麼能讓它看起來很糟糕? – 2015-03-27 18:14:30