我正在做一个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);
}
有人知道如何编辑此播放器样式，或执行某些操作来使用我自己的html / css代码执行此播放器吗？
您可以完全制作自己的样式。只需忘掉controls选项即可（您可以使用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';
}
}
我看到您也在使用音频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上执行此操作。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句