Following Apple’s Worldwide Developer Conference (WWDC) back in June, we posted about the sad state of Macintosh hardware. At the time, every Mac except the iMac Pro had gone over a year without any update. Most egregiously, the Mac Mini had gone almost four years without even a speed bump or price drop. And yet, WWDC came and went without Mac hardware announcements. This was more than a little distressing for us as Mac developers, and the response our post received made it clear that we weren’t alone in our concerns.
Thankfully, there is now reason to be a bit more hopeful. A month after the conference, Apple issued a press release to announce new MacBooks Pro, which featured small but useful improvements. More recently, Apple’s late October event featured truly meaningful updates to both the MacBook Air and the Mac Mini.
The new MacBook Air with Retina display
The 13″ MacBook Air has been updated to be a quality laptop for just about anyone, and the Mac Mini is now a desktop for both average users and many different professionals, with the ability to purchase substantial upgrades in terms of computing power. Both these machines include more powerful processors and much-requested features like a Retina display (on the Air) and a large number of modern ports (on the Mini).
These updates have been very well received, in no small part due to pent-up demand caused by the long fallow period which preceded them. We’re certainly pleased to see these new machines, for both ourselves and our users. The Air and the Mini each make good entry-level Macs, and they’re very easy to recommend to almost any customer.
That said, there’s more work for Apple to do, as the Mac lineup remains slightly muddled. The updates to the Air leave the one-port MacBook especially out of place, and the Mac Pro is still awaiting its promised update. Prices have also increased, and there are reasonable concerns about just how much it costs to join the Mac ecosystem.
Still, Apple is now offering a solid lineup of truly new Macs to purchase, and that’s no small thing. The quality of these recent updates also gives us hope that the new Mac Pro will be well designed too. High-end users will undoubtedly be saving their pennies as they look forward to 2019. We certainly hope these recent updates are the beginning of a longer-term trend, and a return to regular Mac refreshes. If Apple can continue to make worthwhile updates as they did with these two products, and if they commit to more regularly updating all of their computer offerings, the future of the Mac will remain on solid ground.
Late last month, Apple finally shipped updates to two of the most neglected Macs, the Mac Mini and MacBook Air. While the prices have unfortunately crept up, these are solid updates worthy of consideration by anyone looking for a new desktop or laptop. Better still, they include a nice little surprise when it comes to audio: two distinct audio output devices!
Output Devices on Old Macs vs. New
On older Macs, the headphone jack and the internal speakers are essentially separate ports on a single output device, and only one of these ports is allowed to be active at a time. Because of this, audio can be sent to either the built-in speakers, or the headphone jack, but not to both. As well, if anything is connected to the headphone jack, the OS shuts off the built-in speaker completely.
With these new Macs, there are actually two distinct output devices. The headphone jack and the internal speakers are separate devices, completely independent from one another.
This change means it’s possible to send different audio sources to each outputs. Below, you can see this in action, with Audio Hijack being used to route audio from iTunes to a pair of external headphones while audio from Spotify plays to the built-in speakers.
Send Sound Effects to the Built-In Device
Perhaps the most obvious way to take advantage of these two devices is to send the Mac’s sound effects to the built-in speakers, while using the headphone jack for music and other audio. This way, you’ll never be jarred out of a good listening session by an error message beep blaring over your music.
To split things up, head for the “Sound Effects” tab in the Sound System Preference. There, you can configure the “Play sound effects through” setting to use the the device speakers set the Sound Effects.
Make sure your headphones or speakers are being used for the standard audio output device (as configured in the “Output” tab), and you’ll be all set.
More Powerful Audio Control, With Audio Hijack and Loopback
Both the aforementioned Audio Hijack and our audio routing tool Loopback are useful for working with multiple audio devices at once. With older Macs that effectively only had a single audio output device, however, you needed to have external audio devices to do any sort of routing.1 These new Macs mean powerful audio routing is possible with nothing more than a pair of headphones.
Auto-Switching Still Works
When you plug a pair of headphones or speakers in to the headphone jack on any modern Mac, MacOS automatically switches your output to that new device. Likewise, if you unplug from that port, audio will immediately go back to your built-in speakers. This behavior is still present with these new devices, with the headphone jack still prioritized.
While these new Macs don’t have any jacks dedicated to audio input, it is still possible to get audio in to them without any dongles, using headphones with a built-in microphone (TRRS headsets). This includes Apple’s older Ear Pods (with 3.5mm connector), as well as most modern headphones designed for use with smartphones. Just plug in a compatible headset, and your Mac will recognize it as an input device.
Note that if nothing is plugged in to the headphone jack, the OS will hide that output away. This is mostly just good housekeeping, as it prevents you from sending audio to what is effectively a muted device. As soon as a pair of headphones or speakers are plugged in to the new Macs, that second device will appear, ready for use.
iMac Pros and 2018 MacBooks Pro, As Well
In the course of researching this, I asked friends and colleagues to test several other recent Macs. It appears that distinct output devices are also present in both the MacBooks Pro Apple released in July of this year and the iMacs Pro which started shipping at the end of 2017. It looks like this is a function of the new T2 chip Apple is using in their latest Macs.
Hopefully, this trend will continue in all future Macs. Though it’s a small change, it’s nice for users to have the ability to use multiple audio devices built right in.
For years, we’ve heard from folks who had all sorts of reasons for wanting to use their Mac’s built-in speakers separately from the headphone jack. Until now, we had to explain that it simply wasn’t possible. Thankfully, that’s finally changed. We’re eager to hear about the many ways users take advantage of this new functionality.
Worth a quick mention: simple USB audio adapters are readily available for under $10, in both USB-A and USB-C form factors.
These devices enable you to quickly add extra audio devices to any Mac. ↩︎
Before it was even October, my kindergartener son decided we ought to decorate for a truly spooky Halloween. Our concept: a scary cauldron which kids reach in to to retrieve their candy, complete with smoke and lights.
I took it upon myself to start on the (often overlooked) sound design. Spooky audio is an important component of any scary display or haunted house, and with today’s portable speakers, it’s easy to add. I’ll be placing a couple of small wireless speakers outside to play music and scary sound effects. As you might have guessed, I plan to use Rogue Amoeba apps to help.
Making Background Music
First up, we need some creepy ambient music. Finding something pre-made online is easy, but it’s even more fun to make this ourselves. I previously used GarageBand to make the example music loops we ship with our soundboard app Farrago, so I knew it would work well here too.
I started by making a new GarageBand project in a minor chord, and set the tempo to the slowest possible speed, five beats per minute (BPM). Then I added a bunch of loops and turned up the reverb. In about half an hour, I had made a pretty decent backing track. Almost everything sounds creepy at five BPM, so a little trial and error should be enough to arrive at something suitably unsettling.
Everything sounds eerie with these settings in GarageBand.
Samples like Bells, Choirs, Pads, Organs, and Vox all seem to work well. On top of that, the pitch-shift, echo, and reverb filters are useful to make them sound extra spine-chilling.
I encourage you to experiment and make your own audio, but you’re also welcome to use my audio file.
The music will serve as a backdrop, but I also want to be able to play spooky sound effects on demand. Here’s where our soundboard app Farrago comes in. I downloaded a bunch of sound effects from FreeSound.org and put them into a new set in Farrago.
First up, I added a bunch of on-demand effects. These are unsettling growls, howls, and cackles which I can play at random. I then added a bubble sound effect, to help sell my cauldron. Finally, I put in the spooky music file I made in the last step with GarageBand. I set the music and bubbles to loop, so they’ll provide he backing track and run continuously.
One great advanced feature of Farrago is MIDI triggering, which I’ll use to avoid the need to carry my 27” iMac to the front door of the apartment. The iMac can instead remain on my desk, running all the audio behind the scenes, while I control it remotely with an iOS MIDI trigger app on my phone.
I’ve set up an app called TouchOSC to control Farrago, though most any MIDI app should work. If you need help getting your iOS device talking to your Mac, this link should help.
Sending to Speakers with Airfoil
Farrago isn’t the only Rogue Amoeba tool I’ll be using. I’m also going to use our home audio streamer Airfoil to wirelessly send the desired audio from my Mac to speakers set up outside my front door.
The two speakers I’m going to use for this are my HomePod and a bluetooth speaker. Airfoil is a big help here, as it can send in sync to both bluetooth and AirPlay.
I plan to set up my speakers around the entrance to my house, and then set them as outputs in Airfoil, with Farrago as the source. Streaming audio using Apple’s AirPlay introduces a slight lag, but it should be plenty speedy enough to get some good jump scares.
In Airfoil, I just select Farrago as my source, and then click the Transmit buttons next to my desired outputs.
Audio is now streaming to my HomePod and Bluetooth speakers – perfect!
Getting It All Together
At this point, I have everything I need for the 31st. When the time comes, I’ll set my custom creepy music and bubbles playing on a loop, and use the MIDI app on my phone to trigger sound effects remotely. The sound coming from multiple sources in sync creates a very cool effect, like the sound is coming from everywhere, and is going to help sell the creepy vibe. A smoke machine, coloured lights, and creepy decorations from my son will bring it all together and make good creepy fun for all the neighbourhood kids.
While working on the recent launch of Airfoil 5.8 (with Sonos support!), I wanted to visually convey the idea of wireless broadcasting by using the tried-and-true pattern of concentric circles. To really sell the effect, I wanted these circles to animate when the mouse cursor was hovering over them. This took some doing, but a bit of inspiration from my childhood got us where we wanted to be.
Getting Started with Gradients
The easiest way to display concentric rings is a simple radial gradient, done in CSS. CSS gradients are a lightweight way to add all sorts of visual patterns to the web. This means not just the smooth gradual changes between colours generally associated with the word “gradient”, but also lots of other repeating patterns.
This is the desired look, but I really wanted these radial circles to move.
Gradients are super useful, but they’re usually about as animated as a Moai. Unlike many other web elements, you can’t just set the start and end states, then have the browser interpolate out a smooth animation. I expect this will one day work in the major browsers, but for the moment it’s not supported.1
Stop Motion Inspiration
To get the animation I was after, I reached back into my childhood. Long ago, in the days of VHS, I made stop-motion animations with my family’s clunky camcorder. I would painstakingly build a tiny set and characters out of clay, then move it all very slightly, to animate a scene one fraction of a second at a time. It was arduous, but much like CSS now, I had to work with what I had.
A still frame of an unlucky Play-Doh guy getting hit in the head with a snowball, circa 1992 or so. Sorry Pixar, I went into software design instead of animation.
I realized we could put a new twist on that old stop-motion technique, by writing out CSS to create one frame at a time, then using the animate function to cycle through them. It would work a lot like those old animations I used to make, but with the “frames” created from code instead of images.
Animating with CSS
Doing this in CSS requires two steps. We first defined our frames using the @keyframes function. After that, we applied the animation to our banner with the Animate function, which defines how the frames will play.
Step 1: Defining The Necessary Frames
The good thing is that the CSS needed to generate each frame of our animation was relatively straightforward, though quite repetitive. We simply incremented the progress count by 2%, and the radius of the ring portion of the gradient by 1px each frame. My co-worker Lee made a quick script to brute-force generate the 51 frames in our loop, which we then placed in the related CSS file.2
I won’t show all the frames here, as there are too many, but here are the first two frames as an example. One thing worth noting is that we actually built the animation with the rings radiating outward, because the math was slightly easier. In the second step, that animation is reversed, to get the desired effect.
Here’s the first (0%) frame of an animation I’m naming waves:
This code may be a little complicated to the uninitiated. It sets the repeating background gradient we want, with the size of the inner ring at 0px, and a total width of 52px. We need to increment the radius of the inner ring by 1px for each frame, to make the rings move a single pixel outward (remember, we’ll reverse it later). So, the second frame looked like this:
There are another 49 frames, omitted here in the name of brevity, which increment the ring size by one pixel per frame until we hit 100%.
Step 2: Making Those Frames Move
The above code creates the individual frames which will result in our desired animation. However, we still have to define how they will animate. HTML and CSS keeps the animation and the definition of how it plays separate in the name of reusability. Making this animation apply to our banner was then as simple as adding the following bit of CSS of our banner element:
This last bit of code is equivalent to the playback controls, and defines aspects such as speed, iteration count, and direction. By separating the actual animation elements (the frames and instructions), from the playback controls, you could very easily apply the same animation to different elements, but with different playback parameters.
A good example of how this separation is useful is that our animation frames are built in the opposite direction of how we wanted them to run, so we’ve specified in the playback controls for them to run in reverse. If I wanted it to run the other way, or even ping-pong back and forth, I wouldn’t have to define a whole new animation, I’d just edit these playback controls.
Our End Result
Here’s a slightly modified version of the banner which appeared on our front page. To better show the effect, this version doesn’t require hover to animate:
Stream to Sonos
Airfoil now sends to Sonos’s AirPlay-compatible speakers
As you can see, our CSS animation got us what we wanted. The concentric rings draw via CSS, and are then animated inward, representing audio streaming to these devices. CSS gradients and animation allowed me to achieve the effect I wanted, while remaining very lightweight. The frames are only about 15KB in total, a pittance for an animation in today’s world of overweight web pages.
I’m very happy with this result. This was an effect I’ve wanted before, but I hadn’t previously figured out the right approach. There’s a good chance you’ll see this technique used again before too long on our site. Perhaps you can make use of it yourself as well!
Surprise kudos to Microsoft, because the current version of Edge does support this type of animation. ↩︎
60 frames would have been ideal, to fit into the 60 frames per second most computers display. However, CSS keyframes are defined as percentages, which makes it difficult to define keyframes that don’t fit easily into 100. A bit more math may have made it possible to get the animation to take exactly 60 frames, but 51 frames wound up working quite well, with less work. ↩︎
Rogue Amoeba’s 16th birthday is coming up this Sunday, so it seems an appropriate time to take a look back into the past. Join us for a quick tour of the evolution of our in-app License window.
Our Very First License Window
When we first started shipping software in 2002, our License window was very rudimentary. This image dates Audio Hijack Pro 2’s release in 2004, but we believe it was still using our very first License window design:
As you can see, this window offered only a small “Thank you” message at the bottom. Not long after Audio Hijack Pro 2 shipped, we decided this window should have a bit more flair and style.
The First Flashy License Window
As Quentin detailed when we made our first update, our goal in jazzing up the License window was two-fold. First, we wanted to show our appreciation to our paying customers by providing a little something special when they unlocked the software. In addition, we hoped to reduce the number of folks who lost their license keys, by encouraging them to print them out for safekeeping.
To accomplish these goals, we showed paying customers an old-timey stock certificate with the user’s specific details filled in. Here’s what that original certificate looked like in 2004:
Stately, like Wayne Manor!
The above design lasted almost a decade, but the License window has since been updated several times.
A Different Certificate
After we hired our first full-time designer, Christa, we eventually got the third iteration of our License window. This started shipping in 2012:
I barely remembered this existed, but I actually quite like it.
However, this certificate lasted less than a year before it was supplanted by something quite different.
An HTML-Based Window
In mid-2013, we undertook a revamp of the entire License window to make it HTML-based. This led Christa to make an update to the window’s content as well. Here’s the least certificate-y version of our “certificate-style” window:
We also moved away from the typewriter font style at this time.
Neale’s First Design
The window looked like that until we finally undertook another update earlier this year. Our current designer Neale took over the reins from Christa back in 2015, and he’s now overhauled the window’s HTML with many small improvements to provide a better experience. While doing this, he also put his own stamp on the window’s look and feel:
We’ve started trending back towards a certificate.
The above design shipped briefly, before we decided to make a larger change.
License Window Number Six!
These days, we really don’t expect anyone at all to be printing out this certificate. Printers are less and less common, and we long ago developed an automated tool enabling customers to recover lost license keys. As a result, showing the actual license code in the window was of minimal usefulness, and we decided to remove it from display entirely:
We also added a fun gold foil seal.
This is the current iteration of our License window, and we think it looks pretty great. However, there’s something you can’t see in a static image. When the software is unlocked, we now show a delightful animation! Click below to have a look:
Digital confetti is by far the best confetti, because you don’t have to clean it up.
If you’re a loyal user who’s already unlocked our software, don’t worry. You too can join in the fun, thanks to this one weird trick. Just follow these steps to trigger an internal testing function which will let you re-unlock the software.