[Open Sheet Music Display] 一：音符着色及区域高亮

介绍

Open Sheet Music Display: A MusicXML renderer for the Browser

可以理解成是一个用于加载xml格式的曲谱，并提供一些个性化支持。因为本质是 HTML 和 JavaScript，所以理论上可以用于所有能加载网页的设备

官网：https://opensheetmusicdisplay.org/

Github：https://github.com/opensheetmusicdisplay/opensheetmusicdisplay

需求

因为需要在移动设备上有加载曲谱的需求，并且需要对曲谱进行一些定制需求，但网上可参考的文档比较少，只能通过issue来查找相关信息。所以在这记下需求和解决办法，便于他人查找使用

需求一：标记/修改音符颜色

这里列举了一些在研究过程中碰到的问题以及尝试过的方式，要知道正确实现方式请看方法四

方式一：全局渲染

Link: https://github.com/opensheetmusicdisplay/opensheetmusicdisplay/wiki/Exploring-the-Demo

// 小节索引
var noteSubsectionIndex = 0
// 音符索引
var noteIndex = 0

function updateNoteColor() {
    // 每小节音符数
    var staffEntries = osmd.graphic.measureList[noteSubsectionIndex][0].staffEntries
    if (noteIndex >= staffEntries.length) {
        noteIndex = 0
        noteSubsectionIndex++
        staffEntries = osmd.graphic.measureList[noteSubsectionIndex][0].staffEntries
    }
    staffEntries[noteIndex].graphicalVoiceEntries[0].notes[0].sourceNote.noteheadColor = "#32D74B"
    osmd.render()
    noteIndex++
}

上面部分内容的含义：

  // 小节数 osmd.graphic.measureList
  // 第几小节 osmd.graphic.measureList[0] [第1小节]
  // 每小节 第几部分 indexosmd.graphic.measureList[0][0] [第1小节第一部分]
  // 每小节 第几部分 音符数 osmd.graphic.measureList[1][1].staffEntries [第2小节第2部分所有音符]

这是官方Demo里的展示，用于修改音符的颜色，适用于初始化曲谱需要修改指定位置的音符的颜色，但不适用于实时修改音符，因为每次都需要重新渲染，对于比较大的曲谱等待时间过长

缺点：每次修改颜色都需要重新渲染

方式二：根据音符坐标绘制线

Link: https://github.com/opensheetmusicdisplay/opensheetmusicdisplay/issues/940

function updateNoteColorWithLine() {
    var staffEntries = osmd.graphic.measureList[noteSubsectionIndex][0].staffEntries
    if (noteIndex >= staffEntries.length) {
        noteIndex = 0
        noteSubsectionIndex++
        staffEntries = osmd.graphic.measureList[noteSubsectionIndex][0].staffEntries
    }
    var startNote = staffEntries[noteIndex].graphicalVoiceEntries[0].notes[0]
    var start = startNote.PositionAndShape.AbsolutePosition;
    console.log(start)
    var end = new opensheetmusicdisplay.PointF2D(start.x, start.y)
    start.x -= 1
    end.x += 1
    console.log(start, end)
    osmd.Drawer.DrawOverlayLine(start, end, startNote.ParentMusicPage, "#8020a162", 1);
    noteIndex++
}

这个方法其实不算是修改音符本身，而是在音符的位置上画一个线，相当于是打上标记，这里注意一点：线的颜色最后两位是透明度的值

缺点：不是作用于音符本身

方式三：根据id获取页面svg标签

Link:: https://github.com/opensheetmusicdisplay/opensheetmusicdisplay/issues/549`

// 小节索引
var noteSubsectionIndex = 0
// 音符索引
var noteIndex = 0

function updateNoteColorWithId() {
    var staffEntries = osmd.graphic.measureList[noteSubsectionIndex][0].staffEntries
    if (noteIndex >= staffEntries.length) {
    noteIndex = 0
    noteSubsectionIndex++
    staffEntries = osmd.graphic.measureList[noteSubsectionIndex][0].staffEntries
    }
    var vfnote = staffEntries[noteIndex].graphicalVoiceEntries[0].notes[0].vfnote[0]
    var noteId = 'vf-' + vfnote.attrs.id
    document.querySelectorAll(`g#${noteId} path`).forEach(item => {
    item.setAttribute('fill', '#20a162');
    })
    noteIndex++
}

这种通过获得当前节点的音符对应的svg的id，以实现直接修改音符颜色，这种方式不需要重新渲染。但是有个限制条件：就是只适用于单行曲谱

缺点：只能用于单行曲谱

方式三：根据id获取页面svg标签（改进版）

Link: https://github.com/opensheetmusicdisplay/opensheetmusicdisplay/issues/549

// 小节索引
var noteSubsectionIndex = 0
// 音符索引
var noteIndex = 0

function updateAllNoteColorWithId() {
    var measureList = osmd.graphic.measureList[noteSubsectionIndex]
    // 所有列表的长度
    let listLength = measureList.map(item => {
        return item.staffEntries.length
    })
    console.log(listLength)
    // 最大的列表长度
    let max_length = Math.max(...listLength)
    // 最大列表的索引
    let max_index = listLength.indexOf(max_length)
    // console.log(max_index)
    // 当前小节 每个部分 当前位置的音符
    for (i = 0; i < measureList.length; i++) {
        let staffEntry = measureList[i].staffEntries[noteIndex]
        if (typeof staffEntry != "undefined") {
            var vfnote = staffEntry.graphicalVoiceEntries[0].notes[0].vfnote[0]
            var noteId = 'vf-' + vfnote.attrs.id
            document.querySelectorAll(`g#${noteId} path`).forEach(item => {
                item.setAttribute('fill', '#20a162');
            })
        }
    }
    console.log("index", noteSubsectionIndex, noteIndex)
    // 当前小节已遍历完每个部分的音符（即已经遍历完最长音符列表）
    noteIndex++
    if (noteIndex >= max_length) {
        noteIndex = 0
        noteSubsectionIndex++
    }
}

这个方法弥补了之前只能作用于当行曲谱的缺陷，考虑到上下曲谱可能会个数不一致，所以使用最大长度作为遍历条件。确保能全部遍历到，但是测试了一些曲谱还是发现了问题：

图1.png

可以看第二小节的第二个节点出现问题了，本来应该要等下行的到第五个上面才应该变色的，但是实际代码获取的列表并不会这么理想，获取到的只是向下都是个数为5的列表

缺点：如果上下行音符数量不一致，高亮部分会错位

方式四：根据当前 Cursor 来获取对应的 Note

Link: https://github.com/opensheetmusicdisplay/opensheetmusicdisplay/pull/659

function updateNoteColorByCursor(state = true) {
    let currentVoiceEntries = osmd.cursor.iterator.currentVoiceEntries
    if (typeof currentVoiceEntries != "undefined") {
        for (i = 0; i < currentVoiceEntries.length; i++) {
            let note = currentVoiceEntries[i].notes[0]
            let gNote = opensheetmusicdisplay.GraphicalNote.FromNote(note, osmd.rules)
            let el = gNote.getSVGGElement()
            var noteColor;
            if (state) {
                noteColor = '#20a162'
            } else {
                noteColor = '#FF453A'
            }
            // 过滤掉吉他谱的数字部分
            if (el != null) {
                el.querySelectorAll('path').forEach(item => {
                    item.setAttribute('fill', noteColor);
                })
            }
        }
    }
}

这种其实也是根据svg的id实现变色，但是获取方式不同。根据当前cursor来获取可以保证不会发生高亮错位等问题

这样就解决了音符变色的问题，那么清除着色的音符怎么办，重新渲染吗？其实不需要

function clearAllNoteColor() {
    document.querySelectorAll('path').forEach(item => {
        item.setAttribute('fill', '#000000');
    })
}

需求二：高亮选中区域

方法一：移动光标根据音符位置进行绘制

function drawShadeByNote(jsonStr, totalSize) {
    let rangeArray = jsonStr['ranges']

    // 重置 Cursor
    osmd.cursor.reset()

    // 绘制高亮区间
    if (rangeArray.length > 0) {
        // 以下参数可根据实际显示情况自行调整
        // 绘制点 y 坐标偏移量
        let offsetY = 2
        // 绘制点 x 左右偏移
        let paddingX = 1

        rangeArray.forEach(range => {
            let start = range[0]
            let end = range[1]
            // 移动 cursor 到开始位置
            for (var i = 1; i < start; i++) {
                osmd.cursor.next()
            }
            let startNote = osmd.cursor.iterator.currentVoiceEntries[0].notes[0]
            let gStartNote = opensheetmusicdisplay.GraphicalNote.FromNote(startNote, osmd.rules)
            var startPosition = gStartNote.PositionAndShape.AbsolutePosition
            var startPoint = new opensheetmusicdisplay.PointF2D(startPosition.x - paddingX, startPosition.y + offsetY)

            // 保存上一个 position
            var prePosition
            // 移动 cursor 到结束位置
            for (var i = start; i < end; i++) {
                // 检查是否换行
                let note = osmd.cursor.iterator.currentVoiceEntries[0].notes[0]
                let gNote = opensheetmusicdisplay.GraphicalNote.FromNote(note, osmd.rules)
                let position = gNote.PositionAndShape.AbsolutePosition
                if (typeof prePosition != 'undefined' && prePosition.x > position.x) {
                    // 发生换行，先绘制这部分区间
                    let point = new opensheetmusicdisplay.PointF2D(prePosition.x + paddingX, startPosition.y + offsetY)
                    osmd.Drawer.DrawOverlayLine(startPoint, point, gStartNote.ParentMusicPage, '#e3b4b880', 15)
                    // 重新赋值 start 相关属性
                    startPosition = position
                    startPoint = new opensheetmusicdisplay.PointF2D(position.x - paddingX, position.y + offsetY)
                    console.log(prePosition, position, startPoint)
                }
                prePosition = position
                osmd.cursor.next()
            }
            let endNote = osmd.cursor.iterator.currentVoiceEntries[0].notes[0]
            let gEndNote = opensheetmusicdisplay.GraphicalNote.FromNote(endNote, osmd.rules)
            let endPosition = gEndNote.PositionAndShape.AbsolutePosition
            let endPoint = new opensheetmusicdisplay.PointF2D(endPosition.x + paddingX, startPosition.y + offsetY)
            osmd.Drawer.DrawOverlayLine(startPoint, endPoint, gStartNote.ParentMusicPage, '#e3b4b880', 15)
        })
    }
    // 隐藏 cursor
    osmd.cursor.hide()
}

输入参数：drawShadeByNote({"ranges": [[1, 5], [15, 20]]}, 20)

效果如下：

图2.png

可以看到虽然实现了效果，但是因为是根据当前音符来定位，这样难免会因为音符处在五线谱的不同位置而造成显示错位

缺点：绘制的遮罩不能完美对齐五线谱

方式二：移动 Cursor，根据 Cursor 位置进行绘制

function drawShadeByCursor(jsonStr, totalSize) {
    let rangeArray = jsonStr['ranges']
    
    // 重置 Cursor
    osmd.cursor.reset()

    // 高度偏移，可选
    let offsetHeight = 10

    // 绘制高亮区间
    if (rangeArray.length > 0) {
        let cursorWidth = document.querySelector('#cursorImg-0').width
        // 高度需要实时获取，因为曲谱的不同小节音符位置不一样
        // Cursor 的高度也会发生变化
        // let cursorHeight = document.querySelector('#cursorImg-0').height
        rangeArray.forEach(range => {
            let start = range[0]
            let end = range[1]
            // 创建遮罩元素，使用光标的坐标来定位
            let rangeMask = document.createElement('div')
            rangeMask.id = "rangeMask"
            rangeMask.style.backgroundColor = '#e3b4b880'
            rangeMask.style.position = 'absolute'
            // 移动 cursor 到开始位置
            for (var i = 1; i < start; i++) {
                osmd.cursor.next()
            }
            let startCursorLeft = document.querySelector('#cursorImg-0').style.left
            let startCursorTop = document.querySelector('#cursorImg-0').style.top
            // 设置遮罩位置
            rangeMask.style.left = startCursorLeft
            rangeMask.style.top = `${parseFloat(startCursorTop) - offsetHeight}px`
            // 换行条件使用 cursor left 会出现奇怪的换行情况，暂时发现问题原因
            // 所以换行条件使用 cursor top
            // 保存上一个 cursor top
            let preCursorTop
            let perCursorLeft
            // 移动 cursor 到结束位置
            for (var i = start; i < end; i++) {
                let cursorLeft = document.querySelector('#cursorImg-0').style.left
                let cursorTop = document.querySelector('#cursorImg-0').style.top
                if (typeof preCursorTop != 'undefined' && parseFloat(cursorTop) > parseFloat(preCursorTop)) {
                    // 发生换行
                    rangeMask.style.width = `${parseFloat(perCursorLeft) - parseFloat(startCursorLeft) + cursorWidth}px`
                    rangeMask.style.height = `${document.querySelector('#cursorImg-0').height + 2 * offsetHeight}px`
                    document.getElementById('osmdCanvasPage1').appendChild(rangeMask)
                    // 重新设置相关属性
                    startCursorLeft = cursorLeft
                    startCursorTop = cursorTop
                    rangeMask = document.createElement('div')
                    rangeMask.id = "rangeMask"
                    rangeMask.style.backgroundColor = '#e3b4b880'
                    rangeMask.style.position = 'absolute'
                    rangeMask.style.left = cursorLeft
                    rangeMask.style.top = `${parseFloat(startCursorTop) - offsetHeight}px`
                }
                preCursorTop = cursorTop
                perCursorLeft = cursorLeft
                osmd.cursor.next()
            }
            let endCursorLeft = document.querySelector('#cursorImg-0').style.left
            rangeMask.style.width = `${parseFloat(endCursorLeft) - parseFloat(startCursorLeft) + cursorWidth}px`
            rangeMask.style.height = `${document.querySelector('#cursorImg-0').height + 2 * offsetHeight}px`
            document.getElementById('osmdCanvasPage1').appendChild(rangeMask)
        })
    }
    // 隐藏 cursor
    osmd.cursor.hide()
}

这种就能够完美匹配五线谱的大小

效果如下：

图3.png

当然清除这些遮罩也是很简单的，因为我们之前设置了id

function clearAllMessyRange() {
    osmd.cursor.show()
    document.querySelectorAll('#rangeMask').forEach(e => { e.remove() })
}

结尾

基本我碰到的就这些问题，说实话这些研究起来还是比较费时间的，如果各位有什么更好的解决办法欢迎给我留言

PS：以上代码我是改了部分命名，可能会有某些参数名字对不上，如果有也可以在评论提出

后续可能还会有更新，到时候再开一篇