Introducing the InlinePlayer stack

This is possibly the most simplistic audio player available for Stacks. InlinePlayer is ideal if you have one or more audio links on a webpage that you want to effortlessly convert into a user-friendly, mini audio player. The InlinePlayer interface comprises purely of a play / pause button and the title of your audio track.

We purposefully do not bother with progress bars, skip buttons or volume controls in this stack; the emphasis is instead very-much on ease of use and simplicity. Many options are included to customise the appearance of your InlinePlayer and make it look like a part of your website.

Learn more…

2 Likes

This is amazing. Alas, it doesn’t work properly with my RSS feed but I guess that was a long shot anyway. It does display the play button, but it doesn’t hide the original link.

Regardless of my peculiar setup, this stack is great. Good job Will.

Please email me direct the RSS stack in question and a copy of the RapidWeaver project file. Basically everything needed for me to open the project file at this end. I did actually save your sermons page onto my computer and pasted the InlinePlayer code into the page when I was testing your .m4a links. Every link was successfully converted into an InlinePlayer. The audio files were playing and the old links were not left on the page. Incidentally from what I saw, you’d entered a lot of code into your browser title, which should not have been there, and was causing validation errors.

Ok cool. Will do. Thanks Will!

Will: Wow, this is very nicely done! I’m currently using your Playlister stack a lot on a new course website for longer audio that has been chapterized. But Inline is perfect for some other pages where relatively short audio is used. It also gives me some new ideas about how to incorporate short audio into a page. Uber simpler but also uber effective and efficient to use. Thanks.

Will: BTW your product page describes some coding for restricting the scope of audio files InlinePlayer uses. Is there a simple scoping approach that would say: “Don’t use any files used by Playlister on this page”? I realize the answer may be “no”, and I probably wouldn’t need it often, but if there is a simple way to combine Playlister and InlinePlayer on the same page (without conflicts) that would be great to know.

What conflicts are you seeing between InlinePlayer and Playlister? By default, InlinePlayer is only looking for audio links in a webpage. Stacks like Playlister store their audio in adifferent fashion, using HTML5 data- attributes; and so would ordinarily already be excluded from being converted to InlinePlayers.

The only time I can envisage InlinePlayer conflicting with Playlister would be if you had the optional MP3 download button enabled on the Playlister interface. Then you could expect to see the download button rendered as an InlinePlayer, because the download is presented to the web browser as an MP3 link. To prevent that, you’d just have to modify your selector string to include :not selectors and pass the .playlister class along for exclusion, like this:

:not(.playlister) + a[href$="mp3"], :not(.playlister) + a[href$="m4a"], :not(.playlister) + a[href$="ogg"]

So this conditional logic is basically saying “do not touch anything relating to elements within the Playlister, but look for and convert all other MP3, M4A and OGG file links found on the page into InlinePlayers”. I think that should work for what you’re asking for. But you can contact me direct if you think I’m missing something obvious here or there is another issue.

1 Like

@willwood: I wasn’t seeing anything, I was simply assuming there would be a conflict. Of course I forgot the first 3 letters of that word spell “ass”. :slightly_smiling:

I just tested things out with both stacks, and as you write, they work perfectly together. Wow, this is truly fantastic and simple to use. Thanks for the great products and thanks for the quick and thorough explanation. I really appreciate it.