Share audio files from mobile Safari to Huffduffer

Written by on in Graz, Austria.

After I published my first article about a Huffduffer-Workflow for sharing podcasts, a couple of people contacted me who wanted to share audio files from Safari. Not an easy task but in this article I explain how to do it.

Update: What I describe here is already a standard feature of the Huffduffer bookmarklet.

The state of audio in iOS’ default browser

The way Safari for iOS handles media files has always been awkward to me. Apple doesn’t want users to worry about files, URLs and audio formats so the experience usually boiled down to “an audio player magically appears” or “nothing happens at all”. With HTML5s <audio> element Apple tried to make things a little bit more sane by giving developers the possibility to change the styling and behavior of the player. However this lead to an even more obscure experience.

Take NPRs website for example. Visit the site on a screen wider than 768 pixels and a download link shows below the player. Apparently devices with a smaller screen don’t deserve to know the URL to the file.

npr%402x
NPR.org as seen at a window size of 400 pixels on the left and 800 pixels on the right

Neither Apple nor NPR look good in this scenario; my browser (Apple) knows how to play the audio file and the website (NPR) knows how to deliver it, yet both don’t want to expose its URL to me. Naturally I can not share the audio file.

Workflow to the rescue!

I created a workflow that will search a website for audio files even if they are not visible to the user. If it finds more than one match, it will ask the user to choose the correct one. The file will then be sent to huffduffer.com/add. It will work with some sites and fail with others. Send me your feedback so I can improve it.

Download the Huffduff Safari workflow (8kb)
(or view on workflow.is)

The choose dialog that let’s the user pick one of several matches is a bit messy and will sometimes truncate the extension of files. I have added a “Preview” step before that so you can at least see the full URL before choosing blindly.

workflow%403x