Share and Embed Sinewav3 Projects

Cliff Hall
Jun 19, 2018 · 4 min read

A Long Row to Hoe

As you may know, we’ve been working steadily for sometime toward achieving a platform to allow musicians and developers to create awesome visual accompanyment to their sonic creations, with an end goal of outputting video and uploading it to YouTube and other services.

Recently we reached a milestone where developers could begin evaluating the system by creating plugins that are combined and configured by the music producer to create music-responsive 3D worlds.

However, the video production pipeline isn’t fully in place yet and it is irrelevant to the purpose of creating plugins and viewing realtime visualizations. So right now, we’re focusing on making the system as capable for plugin developers as possible. After all, there’s no need to create and upload videos of nothing.

We. Need. Plugins.

Sure, but… TANSTAFL, yo

Even though it’s free and fun, why would a coder want to sign up and create plugins for a video creation system that isn’t completely baked?

Good question, I’m glad you asked.

It only takes a short time to convert a typical Three.js demo into a plugin, a simple process that reveals the lay of the land and prepares you for building your own plugins from scratch.

You can publish plugins as examples for other developers to learn from and improve upon, a great mentoring opportunity.

When the system is fully online and accepting paying customers for video creation, you’ll get a cut of the transaction for every video that uses one or more of your non-example plugins.

That’s all well and good, but the road to hell is paved with good intentions, amirite?

Ayup. That y’are, pard.

That’s why it seemed important to give coders more than promises in exchange for the investment of their valuable time. We needed a way for them to show off their work to folks outside of the system, too.

Sharable Visualizations

The visualizer component of our system is sufficiently standalone that it can be given a JSON representation of a project and it just does its thing. We just wrap a much larger application shell around it in order to provide you with the ability to create plugins and visualizations. As such, we were able to create a very lightweight player that can run any visualization project in any WebGL enabled browser.

After clicking the share button on a project in your list, a small dialog is shown and most likely you’ll just hit ‘Copy to Clipboard and go merrily off to tweet it to your homies.

From the project list, click the share icon ( < )
Configure the options and copy to clipboard

The URL will look similar to this:

https://app.sinewav3.com/visualize/psylight

While the embed code looks something like this:

<iframe type=”text/html” width=”640" height=”360" src=”https://app.sinewav3.com/visualize/psylight" frameborder=”0"></iframe>

Yeah, that.

Rather than have a gobbldy-gook (but unique) project id in the URL, we thought it’d be nice if it was easy to remember, in case you wanted to type it by hand. By default the alias will be your project name, lower-cased, with dashes instead of spaces (coders call this kebab case).

That’s more legible, but there’s always the chance you’ve named your project the same as someone else’s, so we need to let you edit it in case we determine you can’t use that alias. We could just tack a ‘-2’ on the end or some nonsense, but that’d defeat the point of making the URL memorable, wouldn’t it?

As you may have noticed on the screenshot above, we track the number of views your shares get, and show that count to you each time you return to the share dialog for a project.

You can create more than one alias for a project, so you could, for instance track the view counts on different sharing platforms, or between the one you embed on your blog and one you share.

For instance these aliases all take you to the same project:

https://app.sinewav3.com/visualize/psylight

https://app.sinewav3.com/visualize/psylight-blog

https://app.sinewav3.com/visualize/psylight-facebook

https://app.sinewav3.com/visualize/psylight-twitter

Embedding in a blog

Here’s what it looks like embedded in a Wordpress blog:

More to come

The Sinewav3 player gives users a way to share the work they do before we make the video pipeline available for use. But that doesn’t mean we’re done with the player.

Coming soon, are a fullscreen toggle, volume controls, and pause/stop buttons. Also, we’ll add the ability to take a snapshot of the project at any point and have that used as the sharing image on Twitter, Facebook, Instagram, etc.

Sinewav3

A web-based music visualization and video creation tool for…

Sinewav3

A web-based music visualization and video creation tool for artists and developers. Artists: Easily choreograph 3D visual accompaniment for your music. Developers: Use Three.js, WebGL, and our API to create amazing plugins and share the revenue when they’re used commercially.

Cliff Hall

Written by

Software Architect, Author, Musician, Dude. https://cliffordhall.com

Sinewav3

A web-based music visualization and video creation tool for artists and developers. Artists: Easily choreograph 3D visual accompaniment for your music. Developers: Use Three.js, WebGL, and our API to create amazing plugins and share the revenue when they’re used commercially.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store