Embedding VexFlow snippets

[infojunkie]

This is a feature suggestion that I think would help spread VexFlow usage across the Web.

Just like YouTube videos, Twitter posts, Instagram images, etc. can be embedded in Medium.com stories, Facebook posts, tweets, and other (micro-)blog engines, it would be great to give musically-oriented users the ability to embed music snippets created with VexFlow. The difference between this and a dedicated blog engine like My VexFlow is that the latter is an uphill and essentially unwinnable battle to compete with professional blog engines with millions of dollars of funding.

Technically, this means:

• Create a host for VexFlow snippets. This would function like Github gists or JSBin.
• Each snippet would have a permalink and would expose the necessary metadata for embedding: an oEmbed endpoint, Twitter Card metadata, Open Graph metadata.
• A new JS script that embeds the VexFlow code into a host page needs to be written. This script would be delivered by the oEmbed endpoint.
• For embeddability within Medium.com, this new host needs to be registered with Embedly as a whitelisted provider

Hope this makes sense to folks here!

[graciano]

I would love to help making this possible. Commenting just to receive future notifications.

[infojunkie]

Here are a couple of experiments I made to illustrate the concept:

• Using JSFiddle, you can get an embed code for a VexFlow snippet and Embedly is able to recognize the meta tags that JSFiddle exposes to provide an embeddable object.

• Using Mike Bostock's Blocks system, you can create a GitHub gist and have it rendered for you. Blocks also exposes some embedding meta tags (Twitter and OG) but doesn't seem to expose an embed code that can be read by the embedding app.

[ronyeh]

@rvilarl and others: I am closing this issue since it seems stale / outdated. Let me know if this is still a feature request that needs to happen.

vexflow.com currently embeds a VexFlow example from JSFiddle, using this snippet:

<script async src="//jsfiddle.net/pgmye7xo/embed/result,js/"></script>