如何自定義html5音頻播放器

我在做一個html5音頻播放器所以我試圖使用自定義播放器。我不想使用默認的<audio>標籤界面。我想爲玩家做我自己的html/css樣式。如何自定義html5音頻播放器

我的實際代碼（它的工作原理）

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代碼來執行這個球員？

來源

2014-02-10 Wagner Moreira

檢查這一個 [編輯音頻播放器] [1] [1]：http://stackoverflow.com/questions/4126708/is-it-possible-to-style -html5-audio-tag – PlaceUserNameHere

有一個鏈接到工作的jsfiddle是沒問題的，但它也有助於在問題本身中有相關的代碼（鏈接永遠無效）。 – cpburnz

您可以完全製作自己的風格。只需忘記控制選項（您可以簡單地使用controls並且不需要使用controls="controls"）。只要創建按鈕/分隔/不管，他們的風格，並添加控制音頻接口的事件偵聽：

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();

編輯：

I think you want to know what else you can do with the element。你也可以製作一個時間軸的滑塊和一個音量滑塊/靜音按鈕，儘管我更喜歡後兩個在濾鏡等行尾的增益節點上這樣做。

來源

2014-02-10 19:40:54 MarijnS95

很高興能幫到你！我和一位朋友製作了一臺audioplayer，所以我對它有了一些瞭解（它使用了audioAPI和webRTC）:)如果你想知道其他的東西，只需要問一下！ – MarijnS95

是的。它可以通過「影子dom」。你只需要在你的瀏覽器中啓用它，併爲將要到達的元素編寫樣式。

由於我不理想 - 它是瀏覽器特定功能。但對於基於webkit的「影子dom」造型來說，完美無缺。有沒有這麼多的信息，但是這個功能已經全部使用了。例如看到這個問題：Why do no user-agents implement the CSS cursor style for video elements 如果你啓用在巡視器設置中顯示陰影dom，你將會知道它是如何工作的。（也有公共名單與選擇列表 - https://gist.github.com/afabbro/3759334）

對於其他瀏覽器，你需要檢查支持與「陰影dom」的工作。

來源

2014-02-10 18:13:19 msangel

不錯的作品，你有一些例子使用陰影嗎？ –

沒有那麼多的信息。我更新我的權限。這個特性仍然沒有文檔，只是在html中實現新的複雜元素的GUI。所以我建議使用@ MarijnS95答案。 – msangel

如何自定義html5音頻播放器

回答

相關問題