Under The Microscope

Loopback 2 Is Audio Routing, Simplified

Get excited, Loopback users! We’re now shipping Loopback 2.0, a major upgrade to our popular audio routing utility. The success of the first release of Loopback gave us the chance to go back to the drawing board for version two. We focused on making the app both more powerful and more accessible, with an intuitive wire-based interface that better illustrates how your audio will flow.


Loopback’s easy to understand wire-based routing

If you’re already familiar with Loopback, you can jump over to our “What’s New in Loopback 2” web page to read all about the new features. This upgrade is a fantastic leap forward.

New to Loopback?

Loopback gives you control over how audio flows between apps and devices on your Mac. Since it first shipped in early 2016, Loopback has gained a substantial audience of podcasters, screencasters, audio techs, and more. Loopback’s power is great for a wide variety of uses, including:

Playing Audio to All Podcast Guests

When a physical mic is coupled with a music player like iTunes or a soundboard app like Farrago, guests on Skype can hear your voice, as well sound effects and musical add-ons.

Creating Top-Notch Screencasts

Screen recording tools grab either microphone audio or all system audio, and neither option is ideal. With Loopback, get just the audio you need by recording only the mic and the application being filmed.

Pairing It With Audio Hijack

Audio Hijack is best known for letting you record any audio, but it can also apply effects to audio, without recording. When Audio Hijack and Loopback join forces, you can do things like putting a compressor on your microphone before you send it to Skype, and more.

Combining Multiple Hardware Devices

Audio apps including GarageBand, Logic, and Ableton Live only record from a single audio device at a time. Loopback can merge multiple physical input devices into a single virtual device for easy recording.

Using Pass-Thru Devices

Loopback’s virtual audio devices also make it easy to pass audio directly from one application to another. A zero-configuration “Pass-Thru device” can be used as both an audio input and an audio output throughout the system to pipe audio directly between applications.

And So Much More

Podcasters, live streamers, and audio techs swear by Loopback, and now it’s better than ever. Virtual audio devices give you control over how audio flows on your Mac, making it possible to do incredible things.

Try Loopback 2 Right Now

For the power of a high-end studio mixing board in a much simpler package, look no further than Loopback.

Loopback 2 works on MacOS 10.11 and higher, and the links below will get you started. Download our free, fully-functional trial to explore all that Loopback offers, then purchase through our online store for $99.


Get Started With Loopback 2


Notes for Owners of Loopback 1

If you previously purchased Loopback 1, you’re eligible to upgrade to version 2 for just $49. Download the new version to try it out, then click to purchase your discounted upgrade to version 2.

Folks who purchased Loopback on or after September 1st, 2018 will receive a complimentary upgrade to Loopback 2. Full details have been sent via email, so please check your inbox.

Renewed Hope in Mac Hardware

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).



Ethernet, 4 USB-C, HDMI 2.0, 2 USB-A, 3.5 mm headphone jack with audio in

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.

Apple’s Newest Macs Include Better Built-In Audio Devices

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 output. 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 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.

Microphone Capture

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.

Good Housekeeping

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 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. This mnew functionality appears to be related to 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.

Conclusion

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.


Footnotes:

  1. 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. ↩︎

Halloween Fun with Farrago and Airfoil

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.

Here’s a short excerpt so you get the idea:

To get the whole file: Click to download (15 minutes, 11 MB)

Setting Up Sound Effects with Farrago

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.

Happy trick or treating!

Animating CSS Gradients, One Frame at a Time

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:

@-webkit-keyframes waves {
0% {
background: repeating-radial-gradient( 15% 50%, circle, #E5F8FF, #E5F8FF 0px, #B8DDED 0px, #B8DDED 2px, #E5F8FF 0px, #E5F8FF 52px);
}

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:

2% {
background: repeating-radial-gradient( 15% 50%, circle, #E5F8FF, #E5F8FF 1px, #B8DDED 1px, #B8DDED 3px, #E5F8FF 0px, #E5F8FF 52px);
}

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:

.banner:hover {
animation-name: waves;
animation-iteration-count: infinite;
animation-duration: 1s;
animation-direction: reverse;
}

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!


Footnotes:

  1. Surprise kudos to Microsoft, because the current version of Edge does support this type of animation. ↩︎

  2. 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. ↩︎

Our Software