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

时间:2021-7-21 作者:qvyue

介绍

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++
}

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

缺点:只能用于单行曲谱

方式三:根据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  {
                item.setAttribute('fill', '#20a162');
            })
        }
    }
    console.log("index", noteSubsectionIndex, noteIndex)
    // 当前小节已遍历完每个部分的音符(即已经遍历完最长音符列表)
    noteIndex++
    if (noteIndex >= max_length) {
        noteIndex = 0
        noteSubsectionIndex++
    }
}

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

[Open Sheet Music Display] 一:音符着色及区域高亮
图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  {
                    item.setAttribute('fill', noteColor);
                })
            }
        }
    }
}

这种其实也是根据svgid实现变色,但是获取方式不同。根据当前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  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)

效果如下:

[Open Sheet Music Display] 一:音符着色及区域高亮
图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  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()
}

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

效果如下:

[Open Sheet Music Display] 一:音符着色及区域高亮
图3.png

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

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

结尾

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

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

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

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。