如何自定义html5音频播放器 [英] How to customize html5 audio player

问题描述

我正在使用 html5音频播放器，因此我尝试使用自定义播放器.我不想使用默认的<audio>标签界面.我想为播放器制作自己的html/css样式.

I'm doing a html5 audio player so I'm trying to use a custom player. I don't want to use the default <audio> tag interface. I want to do my own html/css styles for the player.

我的实际代码(有效)

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代码执行此播放器吗?

Does someone know how can to edit this player style, or do something to use my own html/css code to execute this player?

推荐答案

您可以完全制作自己的样式.只需忘记控件选项即可(您可以简单地使用controls而不需要使用controls="controls").只需创建按钮/div/任何东西，对其进行样式设置，然后添加一个控制音频界面的事件监听器即可:

You can completely make your own style. just forget about the controls option (you can simply use controls and do not need to use controls="controls"). Just create buttons/divs/whatever, style them, and add an eventlistener that controls the audio interface:

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.这需要很多时间.一个非常简单的方法是创建一个链接到音频元素的源节点:

I see you are also using the audio api. Please note that you can't just dump an audio file in a buffer. It needs to be decoded to raw PCM. This takes a lot of time. A really easy method is to create a source node which is linked to the audio element:

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

要使您的页面更具跨浏览器的功能，请执行以下操作:

To make your page a bit more cross-browser capable:

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

我想您想知道对该元素还有什么其他用途. 您也可以为时间轴设置一个滑块，并为音量设置一个滑块/静音按钮，尽管我更希望后两者在过滤器等行的结尾处的gainnode上执行此操作.

I think you want to know what else you can do with the element. You can also make a slider for the timeline, and a volume slider/mute button, although I'd prefer the latter two to do that on a gainnode at the end of a line of filters and such.

这篇关于如何自定义html5音频播放器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！