如何自定義html5音頻播放器

Question

我正在做一個html5音頻播放器，所以我嘗試使用自定義播放器。 我不想使用默認的<audio>標簽界面。 我想為播放器做自己的html / css樣式。

我的實際代碼（有效）

if('webkitAudioContext' in window) {
    var myAudioContext = new webkitAudioContext();
    }

    request = new XMLHttpRequest();
    request.open('GET', 'http://96.47.236.72:8364/;', true);
    request.responseType = 'arraybuffer';
    request.addEventListener('load', bufferSound, false);
    request.send();

    function bufferSound(event) {
      var request = event.target;
      var source = myAudioContext.createBufferSource();
      source.buffer = myAudioContext.createBuffer(request.response, false);
      source.connect(myAudioContext.destination);
      source.noteOn(0);
    }

http://jsfiddle.net/EY54q/1/

有人知道如何編輯此播放器樣式，或執行某些操作來使用我自己的html / css代碼執行該播放器嗎？

Answer 1

您可以完全制作自己的樣式。 只需忘掉控件選項即可（您可以只使用controls ，而無需使用controls="controls" ）。 只需創建按鈕/ div /任何東西，對其進行樣式設置，然后添加一個控制音頻界面的事件監聽器即可：

的HTML：

<button id="playpause">play
    <!--you can style the content with anything!-->
</button>
<audio id="player">
    <source src="http://96.47.236.72:8364/;" />
</audio>

JS：

window.player = document.getElementById('player');
document.getElementById('playpause').onclick = function () {
    if (player.paused) {
        player.play();
        this.innerHTML = 'pause';
    } else {
        player.pause();
        this.innerHTML = 'play';
    }
}

http://jsfiddle.net/LqM9D/1/

我看到您也在使用音頻API。 請注意，您不能只將音頻文件轉儲到緩沖區中。 需要將其解碼為原始PCM。 這需要很多時間。 一個真正簡單的方法是創建鏈接到音頻元素的源節點：

var source = context.createMediaElementSoure(player); //we defined player in the first block of code

為了使您的頁面更具跨瀏覽器功能：

window.AudioContext = window.AudioContext||window.webkitAudioContext;
context = new AudioContext();

編輯：

我認為您想知道該元素還可以做什么 。 您還可以為時間軸創建一個滑塊，以及一個音量滑塊/靜音按鈕，盡管我更希望后兩者在過濾器等行的結尾處的gainnode上執行此操作。

Answer 2

是。 通過“影子dom”可以實現。 您只需要在瀏覽器中啟用它並為將要到達的元素編寫樣式即可。

如我所知-這是瀏覽器特定的功能。 但是對於基於Webkit的“ shadow dom”樣式來說，它是完美的。 沒有太多信息，但是此功能已被完全使用。 例如，看到以下問題： 為什么沒有用戶代理為視頻元素實現CSS光標樣式如果在檢查器設置中啟用了顯示陰影dom，您將了解其工作方式。 （也有帶有選擇器列表的公共列表-https: //gist.github.com/afabbro/3759334 ）

對於其他瀏覽器，您需要檢查是否支持使用“ shadow dom”。