Tech Distortion

Engineering Technology Automation Software
RSS 

Article Categories

Tangential

Recently I’ve wanted to just chat with people I’ve met on Twitter on either Facetime Audio or Skype. I mean, why not? After doing it a few times it TurnsOutTM that some of things we discussed were worthy of a podcast (IMHO). If Pragmatic is a show highly focused on the detailed discussion of a specific topic and attempts be useful to others, then Tangential is its polar opposite.

Each week or two I’ll bring together two different guests to talk about whatever they like. Odd as it sounds I’ve had a few requests to do a show like this, so I’m going to run this as an experiment and see how it goes. The shows tagline sums it up: “An unending conversation where every topic is a tangent from the last one. Embrace the chaos.”

I also add “No-one’s done this before have they?” because I know - it’s not a new idea for the world but it’s something I’ve never done before. For Exastential and Anodised there was always preparation and planning. Not this time.

Here’s the next twist: If you want to come on the show, just ask. I already have list of people that are keen to appear but if you want to chat, ask me via the feedback form and we’ll see what we can do.




     

jPlayer Integration

I recently added some features to this website that have attracted a little bit of attention and thought it might be helpful to go through one of them I’ve been asked about a few times in the hope that others could find it useful. Before I begin let me start by saying: this is just my way of achieving the desired result. It is by no means the ONLY way nor is it necessarily the BEST way. I found no how-to guides or anything for this it was just a matter of experimentation to get it working. Also this implementation is for integration with Statamic. If you’re using another platform there will be similar elements but clearly the final implementation details will differ.

There are two ways in which I wanted to use jPlayer (to take over from the standard HTML5 Audio player) and that was on the podcast episode listing and on an individual episode page. In order to keep my Statamic templates clean I set up a partial theme and add it to each of my template files: ‘podcast’ and ‘podcastepisode’ as such:

{{ theme:partial src="podcastplayer" count="{{ count }}" }}

In order to pass the correct episode reference I pass the count variable to the partial (since it’s embedded in an entry listing) since this critical to tell the episodes apart. I’ve left the code the same for consistency on the podcast episode template since in that template it’s only called once and I ignore it anyway. Of course, that’s up to how you want to handle it.

The key elements of the ‘podcastplayer’ partial are all in the DIVs:

<div id="jquery_jplayer_{{ count }}" class="jp-jplayer"></div>
<div id="jp_container_{{ count }}" class="jp-audio">...</div>

Obviously how you choose to set up your jPlayer is up to you (it’s very configurable) so I won’t bore you with the specifics of how I’ve implemented mine here.

The final piece is inserting the javascript. There’s multiple ways of doing it but I’ve chosen to insert it in another partial theme called ‘podcasthead’ which I add in my default.html layout:

{{ theme:partial src="podcasthead" }}

Because it’s the most important part of making this work, here it is with only a handful of irrelevant parts removed for simplicity. Some notes to bear in mind:

  • Don’t forget to add your links and styles based on how your jPlayer needs to look.
  • All of my podcasts are hosted under the sub-directory ‘podcasts’ hence I use segment_1 to conditionally add this code. I don’t want it added to every page unnecessarily.
  • I use segment_3 to check to see if you’re looking at a specific episode. If you are segment_3 will look like “Episode-3-turn-the-damn-light-off” or similar.
  • The ‘#jquery_jplayer_1’ in the individual podcast episode section is always ‘1’ since there’s only one podcast shown on an individual page. I also had other reasons for splitting them here but that’s another story for another post.
  • Note that the ‘title’ ‘_audiofolder’ ‘_audiofile’ variables are taken from each individual episodes markdown YAML header in the specific podcast sub-directory.
  • Note the use of ‘count’ to differentiate between the different jPlayer instances on the page.
  • Note that the entries listing content MUST match the settings for the page. In my case I’ve used a history of 10 episodes throughout for all of my podcasts. This needn’t be set to that depending upon your preferences.
  • I keep my jPlayer code in the _add-ons/jplayer directory but clearly this will depend on your own configuration.

{{ if segment_1 == "podcasts" }}
   {{ if segment_3 == "" }}
        {{ entries:listing folder="podcasts/{ _podcastfolder }" limit="10" }}
            <script type="text/javascript">
                $(document).ready(function(){
                    $("#jquery_jplayer_{{ count }}").jPlayer({
                        ready: function (event) {
                            $(this).jPlayer("setMedia", {
                                title: "{{ title }}",
                                mp3: "{{ _audiofolder }}/{{ _audiofile }}"
                            });
                        },
                        play: function() { // To avoid multiple jPlayers playing together.
                            $(this).jPlayer("pauseOthers");
                        },
                        swfPath: "/_add-ons/jplayer",
                        supplied: "mp3",
                        wmode: "window",
                        preload: "none",
                        smoothPlayBar: true,
                        remainingDuration: true,
                        toggleDuration: true,
                        cssSelectorAncestor: "#jp_container_{{ count }}"
                    });
                });
            </script>
        {{ /entries:listing }}
    {{ else }}
            <script type="text/javascript">
                $(document).ready(function(){
                    $("#jquery_jplayer_1").jPlayer({
                        ready: function (event) {
                            $(this).jPlayer("setMedia", {
                                title: "{{ title }}",
                                mp3: "{{ _audiofolder }}/{{ _audiofile }}"
                            });
                        },
                        swfPath: "/_add-ons/jplayer",
                        supplied: "mp3",
                        wmode: "window",
                        preload: "none",
                        smoothPlayBar: true,
                        remainingDuration: true,
                        toggleDuration: true
                    });
                });
            </script>
    {{ endif }}
{{ endif }}

That should be enough to get you running. Let me know how you go and good luck!




     

AAC Now Live

As previously discussed the HE-AAC v2 feed of all Podcasts hosted on TechDistortion are now live. Each is linked individually on their main podcast page as well as on individual episodes and their pages. The existing web player will remain working off the original MP3 feed as will iTunes in an effort to avoid confusion. It’s a little bit of extra work but not too much that will hopefully help those users in both situations. As always, please let me know if there are any issues and if the changes were of any benefit to you personally as I’d love to hear your feedback.

Main Page AAC View Individual Episode AAC View




     

Podcast Feed Hell

There are no things I consider myself to be an expert on: there is always something more to learn. When it comes to RSS feeds and podcasting, I’m still learning so go easy on me.

In my move away from WordPress to Statamic I needed to transplant my old podcast “Exastential” as well as the TechDistortion Audio Article Feed. I did what I usually did - grabbed a copy of some XML HTML source files from a bunch of sites on the internet and quickly read through the RSS fields and set them up the way that I thought they would need to be set up. The episodes came across, were posted and away we went. Using the FeedValidator it came up healthy and I smiled and moved on.

Then came the surgery, going indie with Pragmatic, and suddenly it was time to bring the feed across from Fiat Lux. Ben Alexander had set it up nicely but I wanted to serve the feed from my site, not from LibSyn. I redirected the feed from LibSyn to TechDistortion and within a day I received notification from a fan of the show that Pragmatic had vanished from iTunes. When I checked, so had Exastential and the TD Audio Feed.

Mistake #1: Rushing My Work

The truth was that everything had conspired to result in a close to one month gap from the move of the old two feeds to when I was ready to move Pragmatic across. I scrambled to get everything ready and in the rush I cut a few corners. If I’d had more time I would have been more thorough. First mistake. Stupid, stupid John. The rush drove all of the mistakes that follow.

Mistake #2: Copy and Paste

How many times have I rapped younger programmers across the knuckles about reusing code without understanding it well first. Especially code fragments and here I was rushing my work and doing it myself. I’ve begun to think that in our minds there’s a switch: when we’re in ‘teaching mode’ we have a different level of self-criticism but when we’re in ‘doing mode’ we end up cutting corners because, we know what we’re doing right?

I had unfortunately overlooked a single but rather important tag <iTunes:block> that was in an old feed I had extracted tags from and it was unfortunately set to “Yes”. Since it was a common XML source template in Statamic it was therefore stopping all three feeds from appearing in iTunes. Additionally I’d inadvertently copied the <itunes:new-feed> tags redirecting the feeds to their new one: essentially redirecting the feed back to itself endlessly. I removed that once I figured out it made no sense.

Problem solved? No.

Mistake #3: Choose Your Validators Carefully

Validate, validate, validate. I did. What I didn’t appreciate is that the RSS Feed Validator I’d always used for the site RSS feed didn’t support iTunes podcast tags. After lots of reading online I then discovered Cast Feed Validator which did a podcast-specific check and if it found problems sent you to a standard RSS Feed Validator. In addition I enlisted the help of Feeder, a Mac app designed to help create, modify and validate feeds locally on your machine.

No matter how good your validator is there are some things it can’t detect. The redirection of the feed back to itself is a good example that passed through every single validator that I tried.

I had missed episode-specific summaries, summaries couldn’t have HTML in them, colons in title text messed up the parsing of the titles, plus there were a bunch of tags at the <channel> level that needed to be repeated at the <item> level for no adequately explained reason. At one point I was hacking and slashing code on the train on the way home. Having used up the trains Free WiFi quota (a paltry 50Mb) I switched to my iPhone tethering and noticed that the reception kept dropping out all of the time. Sometimes halfway through an online edit or an upload. Desperation had well and truly set in.

Mistake #4: Assumption

Previously in WordPress I’d used the excellent PowerPress plugin. It did everything for you. There was no XML anywhere. It all seemed so easy and straightforward but unfortunately it wasn’t. Assuming that I’d done this before was clearly, quite simply, stupid.

Mistake #5: Report A Concern

iTunes has a built in mechanism where you can go to a podcast and select “Report a Concern” then ask for help with the feed. This is essentially useless if the three feeds you’re having trouble with have already vanished. It wasn’t until I tried podcasts@apple.com that I was able to get a response. In fact when I told them what had happened I received a response within 18 hours. From what I’ve read on other sites on the internet that’s unusual so I’m either lucky or special - not sure which.

Apple Responds

Hello John, We apologize for the inconvenience. It seems our system ran into an issue when updating from your feeds. The podcasts have been reviewed and re-approved. Please allow 24 hours for the podcasts to appear in the iTunes Store. Best, Kyle

In fact it was significantly LESS than 24 hours. The feeds were literally back within 3 hours time of that EMail, although all of them lacked their artwork. Exastential gained its artwork the following day but TD Audio and Pragmatic took closer to a week before their artwork showed in the store. (Curiously the artwork showed up when you subscribed to the show itself just not in the search)

The Podcatchers

Thanks to some help from some Twitter fans and friends notably Clinton Philips, Matt Foster, Gabriel Visser and Brian Shand I was able to confirm whether the shows were appearing both in their searches and subscriptions for Castro, Downcast and Instacast. I was already testing with (redacted) and (redacted) made sure it worked despite an initial glitch due to my bad feed information leaving only one popular app 1 that was causing an issue at this point was PocketCasts.

Although it took a few days to get sorted PocketCasts came through not only with fixes for all of my shows but they were also kind enough to generate custom landing pages for the shows on their site.

Lessons Learned

It’s really quite simple: Statamic is great but there are currently no Podcasting plugins for it that I know of. This means that you’re hard coding the XML yourself and whilst there are plenty of examples, read up ALL of the documentation first, validate, validate and validate again across as many podcast feed validators as you can find and only then submit to iTunes and publish your RSS podcast feed.

One more lesson to learn: everyone makes mistakes, cuts corners and does stupid things. This time it was me. Next time it could be you.


  1. Popular in terms of the download proportion of Pragmatic as reported by LibSyn. 




     

Podcast Chaptering

With the Exastential Podcast we added Chapters and Chapter-specific artwork to the show. We received maybe one or two positive comments about it. Again we started doing this in the last few episodes of Pragmatic before I left Fiat Lux. Even with a much bigger fan base, we only recieved maybe three or four positive comments about the chaptering of the shows (that I am aware of).

Proponents of Chaptering would argue thusly:

  • Breaking up the show makes it easier for the user to find what they’re looking for if they want to skip a certain topic or go straight to one that interests them
  • Chapters making searchability better
  • Custom artwork for each chapter looks cool?

Like so many things there are cases where it can work well and others where it can’t. For it to work the podcast in question MUST have the following attributes:

  • More than one section that can be broken down into logical sub-topics
  • Sub-topics within an episode that have near-equal time devoted to them
  • Sub-topics that in no way refer to any topics previously mentioned in that episode (i.e. they stand-alone)

Beyond this, if we are to break up podcasts into Chapters then who decides when a chapter should begin and end? This is usually one of the podcasters or their audio technician or producer (if they have one). In short, a handful of people but most importantly they then have to decide to what level the show should be broken down. If I’m talking about electricity, and I spend five minutes talking about electrons and ohms law, does the next section on conductors require a new chapter? What is the correct granularity for chapterising a podcast?

If a podcast goes for 2 hours, how many chapters are therefore acceptable? 3? 10? 25? The answer is completely subjective and the question is impossible to answer. If you’re thinking “rules of thumb will work” or the number that just “feels right” then you’re not helping.

Chapterising a podcast is a poor substitute for what it really lacking: a common framework for users to link to exact moments in the podcast to share on their timelines. At the moment most sites simply say: “Check out this bit at [18:34] in…” or “It’s in the chapter about ‘gun violence’…”.

Chapters Are Gone

Due to the above I’ve decided to remove any chaptering from episodes of Pragmatic from this point forward. In addition the main show feed is now in MP3 format for maximum compatibility across all devices (Pragmatic is most certainly not an Apple-focussed podcast). For those looking for the slightly smaller HE-AAC v2 encoded versions of the shows there will be a new feed going live in a few weeks time.

I’ve been adding some features to the site and now for anyone listening through the website it’s possible to create a link from anywhere in the episode for sharing on Twitter. Based on your feedback I’ll add a few different sharing options in coming weeks. It’s not an industry standard like I was hoping for, but it’s a start. If/when such a standard evolves, I will adopt it.

Upon receiving a Tweet with an episode link and time index in it, following that link will take to right to the page and pressing the new Right-Arrow-Play button on the player will start the episode playing from the linked-to point in the episode. This is similar functionality to SoundCloud but instead works with the flexible jPlayer embedded in Statamic with the audio files hosted wherever you like.

As always, let me know what you think.

UPDATE:

Well people told me what they thought and thank you for your feedback. Just to clarify, HE-AAC isn’t an Apple codec (I didn’t say that specifically but glossed over the detail of what I meant in the now-struck-through comment) however Apple was one of the first to fully support it and remains a strong advocate for its use. The inference I was making relates to the fact that were I hosting an all-Apple podcast, presumably only Apple product users would be listening on Apple devices and Apple fully supports HE-AAC.

The primary issue is that the native decoder implementation on Android in particular is such that it currently doesn’t support playback at anything other than 1x. PocketCasts is very popular on Android and point #16 here under the Android sub-section hints at the issue but this tweet confirms the issue with the native Android implementation.

If people want to listen to the podcast at 2x that’s fine with me it’s their ears listening and that’s up to them. By changing the format to MP3 those people will now be happier when they’re listening. I’ve also received other feedback from users of different software players that don’t support AAC: typically older standalone MP3 players.

Changing to MP3 satisfies as many people as possible which to me is the most important thing. The AAC feed will be live shortly for those that prefer the smaller file size and subltely different audible artifacts each decoder brings to the table.