Playing a MIDI file on a Quarto blog

Quick test to see if a MIDI player will work on this page. And it does!

Matt Crump


February 13, 2024

from diffusers import DiffusionPipeline
from transformers import set_seed
from PIL import Image
import torch
import random
import ssl
import os
ssl._create_default_https_context = ssl._create_unverified_context

#locate library
#model_id = "./stable-diffusion-v1-5"
model_id = "dreamshaper-xl-turbo"

pipeline = DiffusionPipeline.from_pretrained(
    pretrained_model_name_or_path = "../../../../bigFiles/huggingface/dreamshaper-xl-turbo/"

pipeline ="mps")

# Recommended if your computer has < 64 GB of RAM

prompt = "Player piano. piano roll. Automatic self playing piano. white background. transformers cartoon. 3d."

for s in range(30):
  for n in [5,10]:
    seed = s+21
    num_steps = n+1
    image = pipeline(prompt,height = 1024,width = 1024,num_images_per_prompt = 1,num_inference_steps=num_steps)
    image_name = "images/synth_{}_{}.jpeg"
    image_save = image.images[0].save(image_name.format(seed,num_steps))

This is just a picture. Scroll down to try the MIDI player for real.

I happened upon this midi player for webpages. Will it work here too?

Following the instructions from that website, I am adding this script in the yml for this .qmd file, along with a resources line to make sure the midi file is copied to the docs folder.

  - bluesy_C.mid
  text: |
    <script src=",npm/@magenta/music@1.23.1/es6/core.js,npm/focus-visible@5,npm/html-midi-player@1.4.0"></script>

Added an html block that has this code:

  sound-font visualizer="#myVisualizer">
<midi-visualizer type="piano-roll" id="myVisualizer"></midi-visualizer>

And, it works!

Cool, I have not looked deeply into this at all, so I have no idea what’s behind the sound generation. I’m just curious about what happens if I play a midi file that should have a few different voices. I choose the moon theme from the NES ducktales game. Such a great song.

OH YA!!!!!