bg-sound

Web Component to emulate the old-school <bgsound> HTML element

Play MIDI files in a browser with a simple Web Component, emulating <bgsound>, the Background Sound element.

Install

npm install bg-sound

If you do not use a bundler, you can use the standalone script directly in a <script> tag.

Usage

Add a custom HTML element called <bg-sound>:

<script src="bg-sound.min.js"></script>
<bg-sound src="sound.mid"></bg-sound>

Automatically make legacy <bgsound> and <embed> HTML tags work:

<!-- Must include *BEFORE* all <bgsound> and <embed> tags -->
<script src="../bg-sound.min.js"></script>
<script>BgSound.enableCompatMode()</script>

<!-- All of the following HTML tags now work! -->
<bgsound src="goldensun.mid">
<embed src="goldensun.mid">
<embed src="mario-death.mid" loop="2">
<embed src="sound.wav">
<embed src="sound.wav" loop=true>

Talk

I introduced this project in a talk at JSConf Colombia 2018.

• Slides
• Talk video (coming soon!)

FAQ

Why is the tag called <bg-sound> (with a dash)?

The name of a custom HTML element must contain a dash (-). This is what the spec says, presumably because otherwise browsers could not introduce new HTML tags without web compatibility risk.

Why is the script tag required?

The script tag is needed to define the behavior of the <bg-sound> HTML element. Without it, the browser would just treat the tag like a <div>.

Where do the WebAssembly code and instrument sound files come from?

By default, these files will load remotely from BitMidi. This is nice for simple demos and quick hacks. However, it is recommended to host these files yourself. (I reserve the right to remove the CORS headers which allow this to work at any time if too much bandwidth is used.)

What are the timidity and freepats packages?

npm install timidity freepats

The <bg-sound> custom element lazily loads a WebAssembly file and instrument sounds at runtime.

The timidity package provides the WebAssembly file (libtimidity.wasm). The freepats package provides the instrument sound files.

It's important to ensure that the timidity and freepats folders in node_modules are being served to the public. For example, here is how to mount the necessary files at / with the express server:

const timidityPath = path.dirname(require.resolve('timidity'))
app.use(express.static(timidityPath))

const freepatsPath = path.dirname(require.resolve('freepats'))
app.use(express.static(freepatsPath))

Optionally, provide a baseUrl attribute to customize where the player will look for the lazy-loaded WebAssembly file libtimidity.wasm and the FreePats General MIDI soundset files. The default baseUrl is https://bitmidi.com/timidity/.

<bg-sound src="sound.mid" baseUrl="/custom-path"></bg-sound>

How do I automatically make legacy <bgsound> and <embed> tags work?

Include this code before any <bgsound> or <embed> HTML tags:

<!-- Must include *BEFORE* all <bgsound> and <embed> tags -->
<script src="../bg-sound.min.js"></script>
<script>BgSound.enableCompatMode()</script>

<!-- All of the following HTML tags now work! -->
<bgsound src="goldensun.mid">
<embed src="goldensun.mid">
<embed src="mario-death.mid" loop="2">
<embed src="sound.wav">
<embed src="sound.wav" loop=true>

If you want to provide your own baseUrl, then simply pass that into the BgSound.enableCompatMode() function call as follows:

BgSound.enableCompatMode({ baseUrl: '/custom-path' })

Demo

If you like this, then check out BitMidi.com, the wayback machine for old-school MIDI files! Check out some examples MIDIs here:

• Adele - Skyfall
• Beatles - Imagine
• Beyonce - Crazy in Love
• CANYON.MID
• Cowboy Bepop - Space Lion
• Eiffel 65 - Blue
• Kingdom Hearts - Dearly Beloved
• Mario Bros. - Super Mario Bros. Theme
• Passenger - Let Her Go
• Portal - Still Alive
• Rick Astley - Never Gonna Give You Up
• Simpsons Theme Song
• Sonic the Hedgehog - Green Hill Zone
• TOTO - Africa

License

MIT. Copyright (c) Feross Aboukhadijeh.