Question

我创建了一个小页面，您可以在其中拖放音频文件，然后将其上传。然后创建波形并计算音频的bpm（每分钟节拍）。到此为止：没问题。

然后我创建了一种（某种）水平时间轴，其中显示了波形的一部分，如果你播放音频，它将滚动。在波形＆＃34;节拍标记＆＃34;正在被吸引。它们表示每个＆＃34; beat＆＃34;。我想你知道我的意思。然后有一个＆＃34;网格＆＃34;在节拍标记上，可以绘制最多四个音符＆＃34;在每一个节拍 - 最多三个音符＆＃34;一个在另一个之上＆＃34;。要成为一个小小的音乐剧：如果一个节拍是1/4音符，每个绘制的音符将是1/16音符。如果您现在感到有点困惑，只需观看下面的简短视频，我就可以确定您的所有歧义都会消失。这就是概念...... 这是一个小小的演示视频： http://www.youtube.com/watch?v=DkT4LcSAcvo

现在我创建网格的实现：

<script type="text/javascript">
    function createBeatBoxes() {
        var duration = audio.duration;
        var measures = Math.floor((duration/(60/bpm))/beatPerMeasure); //calculate the amount of measures for the complete song - beatsPerMeasure defines time signature (eg. 4/4 or 3/4)
        var gapPixel = gap*secondWidth; //secondWidth defines how wide will be one second on the timeline (eg. "secondWidth=20" would mean the timeline of a song which is 10 seconds long would be 20*10 = 200 pixels wide)
        var measurePixel = secondWidth*(60/bpm)*beatPerMeasure; /defines the width of of one measure
        var beatPixel = measurePixel/beatPerMeasure; /defines the width of one beat
        var notePixel = beatPixel/notesPerBeat; /defines the width of one note - notesPerBeat defines the amount of notes in one beat
        for (i=1;i <= measures;i++) {

            var measureBox = document.createElement("div");
            measureBox.setAttribute('class', 'measureBox');
            if (i == 1) {
                measureBox.setAttribute('style', 'left:'+gapPixel+'px;width:'+measurePixel+'px');
            }
            else {
                measureBox.setAttribute('style', 'left:'+(((i-1)*measurePixel)+gapPixel)+'px;width:'+measurePixel+'px');
            }
            for (j=1;j <= beatPerMeasure;j++) {
                var beatBox = document.createElement("div");
                 beatBox.setAttribute('class', 'beatBox');
                beatBox.setAttribute('style', 'left:'+((j-1)*beatPixel)+'px;width:'+beatPixel+'px');
                for (k=1;k <= notesPerBeat;k++) {
                    var noteBarBox = document.createElement("div");
                    noteBarBox.setAttribute('class', 'noteBarBox');
                    noteBarBox.setAttribute('style', 'left:-'+(0.5*notePixel)+'px;width:'+notePixel+'px');
                        var noteBox = document.createElement("div");
                        noteBox.setAttribute('class', 'noteBox rednoteBox');
                        noteBox.setAttribute('onClick', 'toogleNote(this,"red")');
                        noteBarBox.appendChild(noteBox);
                        var noteBox = document.createElement("div");
                        noteBox.setAttribute('class', 'noteBox greennoteBox');
                        noteBox.setAttribute('onClick', 'toogleNote(this,"green")');
                        noteBarBox.appendChild(noteBox); 
                        var noteBox = document.createElement("div");
                        noteBox.setAttribute('class', 'noteBox bluenoteBox');
                        noteBox.setAttribute('onClick', 'toogleNote(this,"blue")');
                        noteBarBox.appendChild(noteBox); 
                    beatBox.appendChild(noteBarBox);
                }
                measureBox.appendChild(beatBox); 
            }
            document.querySelector('#timeline').appendChild(measureBox); 


        }
    }
</script>

此实现的问题在于时间轴本身是一个非常宽的div（例如950000px），其中包含带有绘制波形的img。在该div中有许多度量div包含（4）beat-divs，它们再次包含（4）note-divs和3个不同的note-sub-divs。这是一个小提取物：

<div class="measureBox" style="left:1.746031745px;width:975.609756097561px">
    <div class="beatBox" style="left:0px;width:242.65243902439025px">
        <div class="noteBarBox" style="left:-29.964304878048782px;width:59.928609756097565px">
            <div class="noteBox rednoteBox" onclick="toogleNote(this,&quot;red&quot;)"></div>
            <div class="noteBox greennoteBox" onclick="toogleNote(this,&quot;green&quot;)"></div>
            <div class="noteBox bluenoteBox" onclick="toogleNote(this,&quot;blue&quot;)"></div>
            ...
        </div>
        ...
    </div>
    ...
</div>

这是css：

.measureBox {
    height:400px;
    float:left;
    border-right: 5px solid rgba(255,255,255,0.5);
    position:absolute;
    box-sizing:border-box;
    top:0;
}
.beatBox {
    height:400px;
    float:left;
    border-right: 3px solid rgba(255,255,255,0.5);
    box-sizing:border-box;
}
.noteBarBox {
    position: relative;
    height:400px;
    float:left;
    box-sizing:border-box;
}
.noteBox {
    float:left;
    height:133.33px;
    width:inherit;
    box-sizing:border-box;
    border-radius: 66.66px;
}
.redNoteBox { 
    top:0;
}
.greenNoteBox { 
    top:133.33px;
}
.blueNoteBox { 
    top:266.66px;
}

总结所有div，它们的长度超过300,000个字符，当然不能再滚动平滑，cpu完全不堪重负。

是否有任何其他方法可以创建这些＆＃34;节拍标记＆＃34;以及＆＃34;绘制＆＃34;在特定间隙/距离的网格上注意到不需要那么多处理器负载吗？

我希望你能提出一些好的想法，甚至是一些代码。那太棒了，因为我完全坚持了这一点。

Answer 1

使用<canvas>，并仅绘制在给定时间实际应该可见的元素。

需要帮助重新思考我的时间轴概念

1 个答案: