My products

Jouele Pro

Jouele Pro

Jouele is an amazing audio player for the web. It was built to look simple and beautiful, and to use a simple and beautiful declarative API. With Jouele, you write code like this:

<a href="ilya-birman-use-me-mix.mp3" class="jouele">
  Ilya Birman: Use Me (DJ Mix)
</a>

And you get a player like this:

Playlists, repeating and keyboard control were gradually added in the recent years. But we wanted Jouele to be even more advanced and versatile. And we didn’t want to sacrifice the declarative nature of Jouele’s APIs.

So we came up with something great: Jouele Pro with custom controls. Let me tell you about it.

What you can do with Jouele Pro

I’ve recently started publishing interactive playlists for my DJ mixes. You can click the cover art to start and pause playback. You can click a track’s name, and the mix will jump to that track. And the currently playing track gets automatically highlighted in the playlist when the playback reaches it.

Try it before reading on.

The magic is that neither the cover art, nor the playlist are a part of the Jouele user interface. The are just part of the page, layed out the way I want. But they gain their special abilities by using Jouele Pro’s declarative API.

So I have a player inserted with the code above, by using the CSS class jouele on an HTML a element. And I want the cover image to initiate and pause playback.

Here’s what I do:

<img
  src="cover.jpg"
  class="jouele-control"
  data-type="play-pause"
/>

That’s it. Now, when you click this image, the mix starts to play.

And to make the playlist items clickable, I do this:

<tr class="jouele-control"
  data-type="seek" data-to="0:45:38"
>
  <td>0:45:38</td>
  <td>Tensal</td>
  <td>Achievement 3</td>
</tr>

Now when you click on a track’s name, you go directly to it in the mix.

I also want the cover art to look somehow “active” when the music is playing. Here’s what I do in CSS:

img.jouele-is-playing {
  outline: rgba(255, 255, 255, .2) 10px solid;
}

That’s it. Jouele Pro dynamically sets the class jouele-is-playing on each of its controls during playback, so the cover art highlighting now works. No JavaScript needed.

The same way the highlighting of the currently playing playlist item works. The actual HTML code for each playlist item is this:

<tr class="jouele-control"
  data-type="seek" data-range="0:45:38...0:48:55"
>
  <td>0:45:38</td>
  <td>Tensal</td>
  <td>Achievement 3</td>
</tr>

This line is not just to jump to a point in time, but it also corresponds to a time range. To dynamically highlight it, I use this CSS:

tr.jouele-is-within {
  background: rgba(255, 255, 255, .2);
  color: #fd0093;
}

That’s it. Jouele sets the class jouele-is-within to all its range controls when the playback is within this range.

If there are several players on a page, the controls control the one that was playing previously, or the first one on the page, if nothing was playing before. You can link the controls to a particular player.

Jouele Pro is $39 per domain name. The free Jouele is available as before.

Links:

  • Jouele
  • Jouele Pro
  • Documentation
    How to use the declarative API and the controls. There is also an example of a full custom player built with the controls
  • Evgeniy Lazarev, the developer of Jouele and Jouele Pro
 226   1 mon   Jouele   my products   projects   release

Aegea 2.7 released

Aegea 2.7 has been released. Aegea is a great blogging engine.

What’s new

There are several new design themes, which look like this:

All new themes are based on the existing theme Plain, but redefine some CSS variables:

Above is the code of the theme “Douglas”, which looks like this:

You can now easily preview the themes from Settings. There is a link that opens a special contrived page, which includes all sorts of blog elements to test. This makes building themes much easier as you can preview your CSS in one place instead of wandering around the blog looking for elements to check.

The editor now supports these Google Docs keyboard shortcuts, thanks to Igor Adamenko:

⌘B bold
⌘I italic
⌘K hyperlink
⌘⌥1 heading
⌘⌥2 subheading
⌘⌥0 usual paragraph
⌘] indent
⌘[ outdent

There are also multiple improvements to the features related to social networking, comments, search, RSS and JSON feed, uploading of images and audio.

About Aegea

An engine is a program that runs on the blogger’s website. It provides the writing tools to the author, shows the posts to the readers and lets them write comments. Medium.com (or similar) is simpler, but they can shut down and take all your posts offline. With an engine, the blog runs on your own website and you have access to the files and the database (you don’t have to deal with the files or the database, but you own all the data).

I want most people to have access to personal blogging in this way. That’s why it uses the most easily available platform: PHP with MySQL.

Aegea powers this and many other blogs. Among my favourites:

With Aegea, you can use one of the built-in themes or customise it however you like (this blog is an example). Be flexible with comments: allow and disallow them globally or per post. Refine posts using Drafts. Add images, videos, audio or code to illustrate your point. Organise your writing with tags.

Designers, writers, musicians and software developers use Aegea to show their work, communicate and spread knowledge. They love it because it’s simple and fast yet does everything they need. Aegea is free for personal use and paid for business use.

Learn more and get Aegea at blogengine.me.

 9   2017   Aegea   my products   projects   release

Aegea 2.6 released

Aegea 2.6 has been released. Aegea is a great blogging engine.

What’s new:

  • Continuous autosaving of form data in post editors. Data is being saved locally in the browser. If the browser or the OS crashes, when you open the editor again, your latest changes will be there. If you edit the post from another device and save the changes to server, the most recent server version will open.
  • The new search finds more relevant posts, works faster and formats the results in a better way. It will not show the full posts, but just the fragments with the search query. If the found post contains images, it will show their thumbnails for quicker identification. For example, try searching street in this blog.
  • It’s now easier to set a post’s cover image for social networks. Just drag an image into the editor’s page. If you drop in onto the Text field, if will be inserted in text, but if you drop it outside the Text field, it will just get added to the post. Social networks will see it as part of the post, but it will not get displayed in its text.
  • Improved database migration from older versions.
  • Multiple other small improvements.

An engine is a program that runs on the blogger’s website. It provides the writing tools to the author, shows the posts to the readers and lets them write comments. Medium.com (or similar) is simpler, but they can shut down and take all your posts offline. With an engine, the blog runs on your own website and you have access to the files and the database (you don’t have to deal with the files or the database, but you own all the data).

I want most people to have access to personal blogging in this way. That’s why it uses the most easily available platform: PHP with MySQL.

Aegea powers this and many other blogs. Among my favourites:

With Aegea, you can use the built-in neutral theme or customise it however you like (this blog is an example). Be flexible with comments: allow and disallow them globally or per post. Refine posts using Drafts. Add images, videos, audio or code to illustrate your point. Organise your writing with tags.

Designers, writers, musicians and software developers use Aegea to show their work, communicate and spread knowledge. They love it because it’s simple and fast yet does everything they need. Aegea is free for personal use and paid for business use.

Learn more and get Aegea at blogengine.me.

 9   2017   Aegea   my products   projects   release

Introducing Aegea

Introducing Aegea, a great blogging engine.

An engine is a program that runs on the blogger’s website. It provides the writing tools to the author, shows the posts to the readers and lets them write comments. Medium.com (or similar) is simpler, but they can shut down and take all your posts offline. With an engine, the blog runs on your own website and you have access to the files and the database (you don’t have to deal with the files or the database, but you own all the data).

I want most people to have access to personal blogging in this way. That’s why it uses the most easily available platform: PHP with MySQL.

Aegea powers this and many other blogs. Among my favourites:

With Aegea, you can use the built-in neutral theme or customise it however you like (this blog is an example). Be flexible with comments: allow and disallow them globally or per post. Refine posts using Drafts. Add images, videos, audio or code to illustrate your point. Organise your writing with tags.

Designers, writers, musicians and software developers use Aegea to show their work, communicate and spread knowledge. They love it because it’s simple and fast yet does everything they need. Aegea is free for personal use and paid for business use.

Learn more and get Aegea at blogengine.me.

 5   2016   Aegea   my products   projects   release