1

Oi pessoal do stackoverflow,

Tem um exemplo GitHub, mostrando visualização do áudio.

Como fazer isso em asp.net mvc ?

View:

<audio controls style="width: 375px;height:225px;">
    <source src="@Url.Action("StreamUploadedSong", "Account", new { id = Model.Id })" type="audio/mp3" />
    Your browser does not support the audio element.
</audio>

Exemplo de imagem:

inserir a descrição da imagem aqui

Onde está o retangulo vermelho, é para mostrar visualização enquanto toca audio.

Alguma idéia ?

10
  • Por visualização você diz um Poster, com alguma imagem referente ao áudio em questão?
    – Leo Letto
    Commented 30/11/2016 às 21:17
  • Oi @LeoLetto, sim Commented 30/11/2016 às 21:24
  • Eu apenas quero mostrar animação enquanto toca a música Commented 30/11/2016 às 21:24
  • Infelizmente perdi alguns conteúdos que eu tinha, não vou poder te enviar link, mas você pode criar esse efeito com CSS Animation, e passar valores aleatórios para criar a animação
    – Leo Letto
    Commented 30/11/2016 às 21:32
  • Tudo bem, vou dar uma pesquisada. Commented 30/11/2016 às 21:37

1 Resposta 1

2

usando o analyserNode e o canvas dá para fazer assim:

var w = 800;
var h = 600;
var total_bars = 16;
var sampleSize = 2048;
var background_color = "#231f20";
var bars_color = "#f0ad00";
var gap = 5;
var bar_width = (w/total_bars) - (gap * (total_bars-1) / total_bars);
var bar_height = getBarHeight(h);
var sound_path = 'song.m4a';

var sound = new Audio(sound_path);
sound.play();

var canvas = document.createElement('canvas');
canvas.width = w;
canvas.height = h;
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');

var audioCtx = new(window.AudioContext || window.webkitAudioContext);

var sourceNode = audioCtx.createMediaElementSource(sound);
var analyser = audioCtx.createAnalyser();
analyser.fftSize = total_bars * 2;
analyser.smoothingTimeConstant = 0.65;

function getBarHeight(h) {
    var bar_height = 0;
    for (var i = 0; i < h; i += 256) {
        bar_height += 1;
    }
    return bar_height;
} 

function update() {
    var frequencyData = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(frequencyData);
    drawFrame(frequencyData);
    requestAnimationFrame(update);
};

function drawFrame(heights) {
    ctx.fillStyle = background_color;
    ctx.fillRect(0,0,w,h);
    ctx.fillStyle = bars_color;
    var rx = 0;
    for (var i in heights) {
        var rw = bar_width;
        var rh = heights[i] * bar_height;
        var ry = h - rh;
        if ( i > 0 ) {
            rx += gap;
        }
        ctx.fillRect(rx, ry, rw, rh);
        rx += rw;
    }
}

sourceNode.connect(analyser);
analyser.connect(audioCtx.destination);
update();

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .