Как настроить аудиоплеер 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"). Просто создайте кнопки/дивы/независимо, их стиль и добавить 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. Обратите внимание, что вы не можете просто выгружать аудиофайл в буфер. Он должен быть декодирован в raw PCM. Это занимает много времени. Действительно легкий способ создать исходный узел, который связан со звуковым элементом:

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

Чтобы сделать страницу слегка более кросс-браузер, способный:

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

Edit:

I think you want to know what else you can do with the element. Вы также можете сделать слайдер для временной шкалы и кнопку слайдера/звука звука, хотя я бы предпочел, чтобы последние два сделали это на уровне усиления в конце строки фильтров и тому подобное.

Answer 2

Да. Это возможно через «теневой дом». Вам просто нужно включить его в свой браузер и написать стили для элементов, которые прибудут.

Как я понимаю, это особенность браузера. Но для webkit-стиля стиль «теневого дома» отлично работает. Существует не так много информации, однако эта функция уже используется в полном объеме. Например, см. Этот вопрос: Why do no user-agents implement the CSS cursor style for video elements Если вы включите отображение тени в настройках инспектора, вы увидите, как это работает. (Также есть публичный список с списком избирателей - https://gist.github.com/afabbro/3759334)

Для других браузеров вам нужна проверка поддержки работы с теневым dom.