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"）。只需创建按钮/ divs / what，设置样式，并添加一个控制音频界面的eventlistener：

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。您还可以为时间轴和音量滑块/静音按钮创建一个滑块，但我更喜欢后两者在过滤器行末端的增益节点上执行此操作。

Answer 2

是。它可以通过“影子dom”。您只需要在浏览器中启用它并为要到达的元素编写样式。

正如我所说 - 这是浏览器特有的功能。但对于基于webkit的造型，“影子dom”工作完美无缺。没有太多信息，但是这个功能已经完全使用了。例如，请看这个问题：Why do no user-agents implement the CSS cursor style for video elements 如果在检查器设置中启用显示阴影dom，您将了解其工作原理。（还有包含选择列表的公开列表 - https://gist.github.com/afabbro/3759334）

对于其他浏览器，您需要检查使用“shadow dom”的支持。

如何自定义html5音频播放器

2 个答案: