如何自定义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();

编辑：

我想你想知道你还能用这个元素做什么。您还可以为时间线制作一个滑块，以及一个音量滑块/静音按钮，尽管我希望后两者在一行过滤器等末尾的增益节点上执行此操作。

Answer 2

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

正如我所理解的那样 - 这是浏览器特定的功能。但是对于基于webkit的"影子dom"样式来说，工作完美。没有那么多信息，但是此功能已经完全使用。例如，请参阅以下问题：为什么没有用户代理为视频元素实现 CSS 光标样式如果在检查器设置中启用显示阴影 dom，您将看到它的工作原理。（还有带有选择器列表的公共列表 - https://gist.github.com/afabbro/3759334）

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