How to show audio preview while playing?

Asked

Viewed 162 times

0

Hi guys from stackoverflow,

Have an example Github, showing audio preview.

How to do this in 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>

Image example:

inserir a descrição da imagem aqui

Where the red rectangle is, it is to show viewing while playing audio.

Any idea ?

javascript html5 asp.net-mvc-5 html5-audio

  • For viewing you say a Poster, with some image referring to the audio in question?

  • Hi @Leoletto, yes

  • I just want to show animation while playing the music

  • Unfortunately I lost some content I had, I won’t be able to send you link, but you can create this effect with CSS Animation, and pass random values to create the animation

  • All right, I’ll do a little research.

  • With CSS Animation works with Analysernode ?

  • Not pure CSS, but you can change the values dynamically with jquery

  • Possible duplicate of Get "waves" from sound or music frequency.

  • if you check the link shown in the question the requested view is different from the duplicate question.

  • Yes @Tomásantunes, but the principles are the same, right? In fact there is no answer on the site that explains how all this works (ours demonstrate but do not explain).

Show 5 more comments

1 answer

2

using analyserNode and canvas can do so:

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();

Browser other questions tagged javascript html5 asp.net-mvc-5 html5-audio

You are not signed in. Login or sign up in order to post.