我正在嘗試使用HTML畫布進行音頻可視化

我確實實作了音頻可視化，但我對結果不滿意。我希望有一個比我想出的更好的解決方案。例如，有沒有更好的方法來繪制條形圖，還有一種更好的影片方法，而不是我所做的改變漸變的方法。

這是點擊播放按鈕之前的音軌

這是點擊播放按鈕后的音軌

這是代碼

window.addEventListener('load', init)

const canvas = document.querySelector('canvas')
const btn = document.querySelector('#play')

const ctx = canvas.getContext('2d')

const sample = [...] // this has a random height values between 0 and 24 px
function init() {

        let barLength = 55
    let barWidth = (canvas.width - (barLength - 1)) / barLength 
    let region = new Path2D()
    for(let i = 0; i < sample.length; i  ) {
        let halfHeight = sample[i] / 2
        region.rect(i * (barWidth   1), (24 - halfHeight), barWidth, sample[i])
    }

    var grd = ctx.createLinearGradient(0, 0, canvas.width, canvas.height)
    grd.addColorStop(0, "#ddd")     
    grd.addColorStop(1, "#ddd")

    ctx.clip(region)

    ctx.fillStyle = grd
    ctx.fillRect(0, 0, canvas.width, canvas.height)
}


let xPos = 0
function drawRect() {
    ctx.clearRect(0, 0, canvas.width, canvas.height)

    let pos = xPos / canvas.width

        pos = pos > 1.0 ? 1 : pos

        var grd = ctx.createLinearGradient(0, 0, canvas.width, canvas.height)
    grd.addColorStop(0, "orange")
    grd.addColorStop(pos, "orange")
    grd.addColorStop(pos, "#ddd")
    grd.addColorStop(1, "#ddd")

    ctx.fillStyle = grd
        ctx.fillRect(0, 0, canvas.width, canvas.height)
}

let prev
let requestId
function draw(sec) {
    if (!prev)
           prev = new Date()

        let now  = new Date()
  
        let difference = now - prev

        prev = now

        xPos  = (difference * canvas.width) / (duration * 1000)

        drawRect()

    requestId = requestAnimationFrame(draw)

    if(xPos >= canvas.width) {
        prev = null
        cancelAnimationFrame(requestId)
    }
}

btn.addEventListener('click', () => {
    draw()
})

uj5u.com熱心網友回復：

你的想法很不錯。

我唯一能想到的是，您目前正在每幀重繪整個影像，但這只會改變橙色部分。

你可以做的是在圖片中畫“洞”，讓白條完全透明。這樣，我們就能看穿海浪。然后圖片將位于 div 中，其背景將更改為橙色突出顯示。

這絕不會改變視覺效果，它只是減少了相同效果所需的計算量。

const canvas = document.querySelector('canvas')
const btn = document.querySelector('#play')

const ctx = canvas.getContext('2d')

const sample = []; // this has a random height values between 0 and 24 px
for(let i=0;i<55;i  ){
sample.push(Math.random()*24);
}
function init() {
    ctx.fillRect(0,0, canvas.width, canvas.height);
        let barLength = 55
    let barWidth = (canvas.width - (barLength - 1)) / barLength 
    let region = new Path2D()
    for(let i = 0; i < sample.length; i  ) {
        let halfHeight = sample[i] / 2
        region.rect(i * (barWidth   1), (24 - halfHeight), barWidth, sample[i])
    }

    var grd = ctx.createLinearGradient(0, 0, canvas.width, canvas.height)
    grd.addColorStop(0, "#ddd")     
    grd.addColorStop(1, "#ddd")

    ctx.clip(region);
    ctx.globalCompositeOperation = 'destination-atop';
    ctx.globalAlpha = 0;
    ctx.fillRect(0, 0, canvas.width, canvas.height)
}


let xPos = 0
function drawRect() {

    ctx.clearRect(0, 0, canvas.width, canvas.height)

    let pos = xPos / canvas.width

        pos = pos > 1.0 ? 1 : pos

        var grd = ctx.createLinearGradient(0, 0, canvas.width, canvas.height)
    grd.addColorStop(0, "orange")
    grd.addColorStop(pos, "orange")
    grd.addColorStop(pos, "#ddd")
    grd.addColorStop(1, "#ddd")

    ctx.fillStyle = grd
        ctx.fillRect(0, 0, canvas.width, canvas.height)
}
init();
const div = document.querySelector('#div');
setInterval(function(){
xPos  ;
 const percent = xPos / canvas.width *100;
 const t = `linear-gradient(90deg, rgba(255,100,0,1), rgba(255,100,0,1) ${percent}%, rgba(255,255,255,1) ${percent}%, rgba(255,255,255,1) 100%)`;
div.style.backgroundImage = t;
},100);

div{
    background-color:white;
    display:inline-block;
    height:50px;
}

<div id="div"><canvas height="50"></canvas></div>

標籤：htmlhtml5-画布

上一篇：如果變數與字串匹配，如何在page.html檔案中禁用Ionic元素

下一篇：創建由3個div組成的行，每個div包含相同大小的圖片