Custom JS?

[tresero]

I'm trying to use this, but I can't get it to display :(

https://sytzez.com/blog/responsive-sheet-music-in-hugo-using-music-xml/

I created a shortcode in layouts/shortcodes/music-xml.html
I also added js_modules = ['musicxml.js'] in config
And in static/musicxml.js
I added this shortcode to the post: {{< music-xml "/static/de-guantanamo-tres-1.mxl" >}} which exists

Nothing renders, and seems strange.

Any ideas?

[igor-baiborodine]

@tresero, do you have a GitHub repo for this? If you do, it will be easier for me to investigate in my local dev.

[tresero]

I’ll make it public when I get home. Thanks!

…

Sent from my iPhone

On Oct 18, 2022, at 7:56 AM, Igor Baiborodine ***@***.***> wrote:  @tresero, do you have a GitHub repo for this? If you do, it will be easier for me to investigate in my local dev. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.

[tresero]

https://github.com/tresero/salsablanca I'm sure it's something stupid on my part. Thanks!

…

On Tue, Oct 18, 2022 at 8:59 AM Jon Griffin ***@***.***> wrote: I’ll make it public when I get home. Thanks! Sent from my iPhone On Oct 18, 2022, at 7:56 AM, Igor Baiborodine ***@***.***> wrote:  @tresero, do you have a GitHub repo for this? If you do, it will be easier for me to investigate in my local dev. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: ***@***.***>

[igor-baiborodine]

I tried to run your website in my local dev, and the page in question has a syntax error in the musicxml.js script:

It looks like there is an issue in the opensheetmusicdisplay.min.js file:

I suggest another approach, i.e., you can generate an iframe element using the Open Sheet Music Education site: https://opensheetmusiceducation.org/embedding/. For more details, please watch this video: https://www.youtube.com/watch?v=0cCy3kUZmSI

Then you can either use the generated HTML directly in your markdown while enabling the raw HTML parameter in the config.toml file or you can create a parametrizable shortcode with the generated HTML. For more details on how to create a parametrizable shortcode with an embed, please read this article: https://www.kiroule.com/article/use-video-embeds-in-hugo-theme/

[tresero]

Ok, I'll check it out. I really appreciate it. I retired from programming 10 years ago, so I'm not as good with this stuff anymore!

…

On Wed, Oct 19, 2022 at 3:00 PM Igor Baiborodine ***@***.***> wrote: I tried to run your website in my local dev, and the page in question has a syntax error in the musicxml.js script: [image: image] <https://user-images.githubusercontent.com/1027701/196799873-099b76e3-698e-485b-b340-1a9f022de5f4.png> It looks like there is an issue in the opensheetmusicdisplay.min.js file: [image: image] <https://user-images.githubusercontent.com/1027701/196800815-7edd194d-b843-4161-a68b-1c990a61fb1b.png> I suggest another approach, i.e., you can generate an iframe element using the *Open Sheet Music Education* site: https://opensheetmusiceducation.org/embedding/. For more details, please watch this video: https://www.youtube.com/watch?v=0cCy3kUZmSI Then you can either use the generated HTML directly in your markdown while enabling the raw HTML parameter in the config.toml file or you can create a parametrizable shortcode with the generated HTML. For more details on how to create a parametrizable shortcode with an embed, please read this article: https://www.kiroule.com/article/use-video-embeds-in-hugo-theme/ [image: image] <https://user-images.githubusercontent.com/1027701/196802035-c40b4bfc-e673-4bb0-94aa-aa9918fa7cce.png> — Reply to this email directly, view it on GitHub <#434 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AALINPXR3BJIBNRMESOMPPDWEBONNANCNFSM6AAAAAARHTC3TQ> . You are receiving this because you were mentioned.Message ID: ***@***.*** com>

[tresero]

Okay, I fixed this.

First, I updated my static/musicxml.js

(function () {
    // Wait for the DOM to render and the osmd script to load.
    document.addEventListener('DOMContentLoaded', loadOsmd)
    document.getElementById('osmd-script').addEventListener('load', loadOsmd)

    var wait = true

    function loadOsmd() {
      // This is just to make sure both load events have fired before we do anything.
      if (wait) {
        wait = false
        return
      }

      // Iterate through all elements with class 'osmd-container'.
      document.querySelectorAll('.osmd-container').forEach(function (container) {
        // Create an OpenSheetMusicDisplay object for the container.
        var osmd = new opensheetmusicdisplay.OpenSheetMusicDisplay(container, {
          // Use minimal spacing and hide the title and instrument names.
          drawingParameters: 'compacttight'
        })

        // Load the MusicXML file.
        osmd.load(container.dataset.musicXmlSrc)
          .then(function () {
            // Render the notation inside the container.
            osmd.render()
          })
      })
    }
  })();

Then my config.toml

js_modules = ['https://cdn.jsdelivr.net/npm/[email protected]/build/opensheetmusicdisplay.min.js','musicxml.js']
Then made sure my musicxml file was in static/musicxml

{{< music-xml "/musicxml/de-guantanamo-tres-1.mxl" >}}

[tresero]

Hope that helps someone.