Chia Sẻ Code Javascript Upload Âm Nhạc MP3 Lên Blog

Chào bạn! chúng ta lại gặp nhau trong chuỗi seri chia sẻ miễn phí các bộ code hữu ích cho website blpog của bạn được hoàn thiện và bắt mắt hơn, khi khách tham quan website của bạn có cảm giác chuyên nghiệp hơn, và hôm nay mình Chia Sẻ Code Javascript Upload Âm Nhạc Lên Blog..

Chia Sẻ Code Javascript Upload Âm Nhạc MP3 Lên Blogger
DEMO

Cách thực hiện.

Các bạn có thể tự dán vào nơi mà bạn muốn hiển thị, phần này chắc mình không cần phải hướng thêm nữa

1. Code HTML

<div id="content">

  <input type="file" id="thefile" accept="audio/*" />

  <canvas id="canvas"></canvas>

  <audio id="audio" controls></audio>

</div>


2. Code CSS

#content{

    position: relative;

    width: 100%;

    height: 380px;

}

#thefile {

  position: absolute;

  top: 10px;

  left: 10px;

  z-index: 100;

}


#canvas {

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

}


audio {

  position: absolute;

  left: 10px;

  bottom: 10px;

  width: calc(100% - 20px);

}


3. Code JS

window.onload = function() {

  

  var file = document.getElementById("thefile");

  var audio = document.getElementById("audio");

  

  file.onchange = function() {

    var files = this.files;

    audio.src = URL.createObjectURL(files[0]);

    audio.load();

    audio.play();

    var context = new AudioContext();

    var src = context.createMediaElementSource(audio);

    var analyser = context.createAnalyser();


    var canvas = document.getElementById("canvas");

    canvas.width = window.innerWidth;

    canvas.height = window.innerHeight;

    var ctx = canvas.getContext("2d");


    src.connect(analyser);

    analyser.connect(context.destination);


    analyser.fftSize = 256;


    var bufferLength = analyser.frequencyBinCount;

    console.log(bufferLength);


    var dataArray = new Uint8Array(bufferLength);


    var WIDTH = canvas.width;

    var HEIGHT = canvas.height;


    var barWidth = (WIDTH / bufferLength) * 2.5;

    var barHeight;

    var x = 0;


    function renderFrame() {

      requestAnimationFrame(renderFrame);


      x = 0;


      analyser.getByteFrequencyData(dataArray);


      ctx.fillStyle = "#000";

      ctx.fillRect(0, 0, WIDTH, HEIGHT);


      for (var i = 0; i < bufferLength; i++) {

        barHeight = dataArray[i];

        

        var r = barHeight + (25 * (i/bufferLength));

        var g = 250 * (i/bufferLength);

        var b = 50;


        ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";

        ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);


        x += barWidth + 1;

      }

    }


    audio.play();

    renderFrame();

  };

};


Như vậy là mình đã chia sẻ tới các bạn 1 đoạn code upload nhạc, audio, mp3 lên website blog... bạn có thể comment góp ý cùng veospot nhé!

Chúc bạn thành công!

Điểm 4.6/5 dựa vào 87 đánh giá
Đánh giá bài viết?

Post a Comment