Amazon, Google, Microsoft, Facebook and Apple have all used humans (employees and contractors) to listen to and transcribe voice recordings from their virtual assistants or messaging apps. This is done, according to the companies, to improve the quality of speech recognition. But in a climate of privacy sensitivity and suspicion all have been forced to suspend, revamp or discontinue this and change their practices.
In July of this year, Google had to address a report from a Belgian broadcaster about third-party subcontractors being able to access recordings of Google Home device owners, which included enough information to reportedly determine their home addresses. The company explained that the subcontractor “violated our data security policies” and that it was going to “take action . . . . to prevent misconduct like this from happening again.”
Google is now offering further clarification of its audio review process and giving users additional privacy protections. The company also apologized for not letting users know what was going on with their audio data in the past.
here.
Despite the above, as of this morning, VAA remains opt-out and copy on the site discourages people from opting out, saying “Pausing Voice & Audio Activity may limit or disable more personalized experiences across Google services. For example, Google may not understand you when you say ‘Hey Google’ to speak to your Assistant. This setting will be paused on all sites, apps, and devices signed in to this account.”
Why we should care. Striking the right balance between privacy and functionality is critical for Google, Amazon, Apple and others. It’s also what Google’s trying to do with its new “transparency, choice and control” initiative around ad personalization more globally.
Paranoia about surveillance is growing though is hasn’t stopped people from using services. But there’s some evidence that privacy concerns — “smart speakers are always listening” — may be hurting adoption and growth in that market. And although the example of Facebook defies this prediction, I believe we will see brand trust become increasingly tied to revenue performance going forward.
Not that long ago, our company was contracted to develop an application which placed a large emphasis on users being able to listen to audio podcasts while browsing the rest of the application completely uninterrupted or multitask on their devices.
The previous version of the application had a separate, hybrid mobile app that allowed users just that, but had performance and functionality issues.
Our approach was to use our React Firebase tech stack to develop a PWA application, covering all use cases under one flexible, performant code base.
The player
We decided to present the audio player to the user at the bottom of the screen when an audio track is being played, without blocking any further interaction with other content displayed on the screen. Also, a condensed version for mobile screens is presented so that it can be expanded with a button press. A simple solution for both small and large screens.
Something like this
Feature set
From a functional perspective, there were a couple of features we had to look out for, such as:
Switching tracks from outside the player component itself
Setting narration speed within the player
A fully functional seek/progress bar
The ability to download the audio source
Most importantly, background playback on mobile devices
Using React and Redux made most of these requirements a non-issue, with the default HTML Audio element supporting most of these controls out of the box. It didn’t take long before we had a functional component ready for testing.
Testing
The requirements to pass testing were the following:
Desktop versions had to be able to persist playback even when minimised in Safari, Chrome, and Firefox
Mobile versions had to be able to persist playback when the application is in the foreground, in the background and when the screen is locked, with basic media controls showing up on the screen when the application isn’t in the foreground.
Results
Android and desktop passed with flying colours in all cases, but iOS – not so much:
Worked only when the application was in the foreground.
When added to the home screen, audio playback stopped completely when the app was minimised or screen was locked.
When opened directly in the browser, audio playback persisted, but sometimes lost context and stopped playing.
Lock screen controls were spotty at best in both cases, sometimes showing up, sometimes not, and sometimes losing context during minimised playback (did nothing to audio playback).
No option to download the audio file, only open it in another tab.
Audio track doesn’t autoplay if there is no user action involved.
The harsh reality
As it turns out, we were fortunate to even have basic PWA functionalities. iOS 12 released a couple of days before testing with improved PWA support on iOS devices to the point that they were now usable.
Before iOS 12, PWAs didn’t persist their state — for example, with iOS 11, if a user was to browse the application, minimise it and then go back to it, the app would restart with a completely cleared cache.
The recent iOS 13 update didn’t fix any of the issues we had with iOS 12 at all, so all our hopes of Apple fixing the problem in the near future were squashed.
This presented a major problem since a large percentage of existing users had iOS devices and audio playback is a major feature to them, so Android and Desktop versions working as intended meant little at this point. Without a functioning audio player on iOS we could not ship the app. We entered limbo at this point, with all other features finished. We had to do something about it, but there was little in the way of helping us.
The next solution
The only thing left for us to try was to wrap the entire web app in a native shell and publish it on the App Store. The entire idea of having everything in one solution went flying out the window, but what can you do.
Enter Cordova.
We continued developing the solution and interoping between our web app, Cordova plugins for background playback, a separate build procedure and generally a separate project to maintain alongside the already huge PWA app.
We managed to utilise Cordova plugins and a little bit of tweaking to our audio player component to finally allow background audio playback. After a while, we had a native app to push to the store.
We tried and got rejected.
We had to implement in-app purchases to get published (because of other sections in the app allowing purchasing tickets to events). There was no efficient way to interop our React frontend with a functioning Cordova in-app purchase plugin from a technical perspective.
Exit Cordova.
At this point, we had a serious discussion on what to do next. We had to go native for iOS. It felt stupid after all this work and with Android and Desktop working perfectly, but it was the only thing to do.
The final solution
After seeing what maintaining a Cordova shell around the PWA app would look like, a native iOS application seems like a much wiser choice when considering future development.
Enter React Native, the obvious choice. We could reuse most of the functional components (entire Redux modules) from our PWA solution, which helped us immensely with a quick delivery. All we had to do was build screens and components.
It took a couple of weeks to finish development of the simplified media player app with all the audio player bells and whistles we expected to work in the PWA version in the first place. Audio download, background playback, fully functional lock screen media controls — we finally had it all.
Final word
The good thing is that audio player and PWA functionalities work perfectly fine on Android and Desktop. We built an extremely fast solution with React, Redux and Firestore that we’re very proud of. However, there are a couple of ugly aspects of it:
There is no control over lock screen media controls, only play and pause work.
An audio element has to be rendered at all times to not mess up playback permissions, no matter if there is an audio source or not. We’ve opted to use an audio object instead of an element, that is always rendered in the DOM.
Of course, the ugliest part of this is that iOS is the cause of nearly all the problems we had with audio playback and we had to build a native app to provide users the functionality Android allows from the get-go.
The worst part of the whole ordeal is that none of the issues were on our side.
Apple proved to be the blocking factor in all instances, even to the point of an application not working as intended. As to the reasons for it, we can’t be sure, but Spotify already has a pretty good idea why PWAs are discriminated against (which you can read about here: https://www.timetoplayfair.com/ ).
In the end, we lost the unified solution we wanted/the client expected and will have to maintain two solutions for the foreseeable future. Thank you, Apple.
A word of advice for any future projects involving PWA — if it has anything to do with media playback, don’t bet on iOS. Think of PWAs as ProblemsWithApple.
There are a variety of reasons why you might want to embed audio in your website. For instance, maybe you sell your own music and want to give users a preview before asking them to purchase a song, or you might just want to have an audio version of a text-based post. In either case, WordPress offers a lot of free plugins to get the job done. They are easy to use and support all common audio formats like .mp3, .wav and .ogg.
In this post, we’ll briefly discuss the features of some popular free plugins. Before we go any further, I would like to mention that there are some very good WordPress audio plugins available from CodeCanyon. These plugins will generally offer more feature and come with free support for up to six months. This means that you can always ask for help if you get stuck.
The Compact WordPress Audio Player is actually an HTML and Flash hybrid plugin. You can use it to embed audio files in .mp3 and .ogg format with use of simple shortcodes.
Since the plugin offers very basic functionality, it will work on almost all devices which people might use to visit your website. It is actually one of the big positives of using this plugin.
The audio player is responsive and its compact design means that it won’t take up a lot of screen space or look distracting. You can embed it in any page or post by using the following shortcode after installing the plugin.
[sc_embed_player fileurl="path/to/file.mp3"]
There are a couple of options available that you can use to determine if the audio should be played on loop or if it should start auto-playing once the page loads. You can also choose between two different templates for embedding the audio. Visit the plugin description page to know more.
This simple HTML5 Audio Player plugin allows you to embed .mp3, .ogg and .wav files into your posts and pages very easily.
The plugin is easily customizable in case you decide to override its styling to make it blend into the theme of your own website. The audio player can also be embedded in the widgets area or in template files.
It offers almost all the same features as the Compact WP Audio Player plugin. For instance, the player has a compact and responsive design. You can also choose to auto-play or set the volume level fro the player. It also relies on shortcodes to embed the audio player into the website.
The major difference between these plugins is that HTML5 Audio Player gives you a user interface that has options to set values for looping, audio volume and player width etc. Once you have checked all the options, the plugin generates the shortcode for you. This might make the plugin more easier to use for complete novices.
If you have been looking for a free WordPress plugin to easily manage your podcasts, your search ends here. The Seriously Simple Podcasting plugin is aptly named because it gets the job done with minimal level of configuration required from your end.
First and foremost, the plugin only has a couple of simple settings so you will be up and running in no time. It also allows you to run multiple podcasts from the same website while giving each of them their own unique RSS feeds. You can also collect stats on your listeners using a free add-on.
The media player is customizable and it was redesigned in a recent update to show the podcast cover image. The plugin supports both audio and video podcasting.
It also offers shortcodes and widgets to allow you to embed single podcast episodes or playlists anywhere on the website. The plugin comes with an integrated podcast hosting platform but you are not required to use it. You can freely host your media files wherever you like.
The are a few more free add-ons for this plugin which augment its functionality. You can read more about the features and how to use this plugin on the support page.
The Audio Album plugin is a great choice for people who want to embed music playlists into their webpage. You can also use it to embed single audio files but it is specifically meant for playlists.
Since the whole list of audio files acts as a single playlist. All of them have a similar styling applied to them. You can also easily change the color of the text and buttons along with the album or player background.
The plugin even gives you the option to completely rewrite the CSS and style everything from scratch. This will give you fill control over every detail of the plugin.
You can embed the songs and playlists in any WordPress post or page using just two shortcodes. There are a bunch of parameters that you can change for each of them to specify things like the title, width or height of the album.
You can specify the audio source in .mp3, .ogg, .wma, .m4a and .wav formats. Just like other plugins, it also allows you to auto-play the audio or play it in a loop etc.
There are a couple of options available for people to show a button along with the audio files in the playlist. This could be to a link where users can read more about that song or purchase it.
If you like the features offered by Audio Album, you should read this tutorial on adding a free WordPress music player to your website. It will teach you how to use all the features mentioned in this post.
AudioIgniter is yet another plugin that you can use to create music playlists and embed them in your website. The player can be added to posts, pages or any other custom post types.
The plugin allows you to create unlimited playlists with unlimited songs. The player also has a responsive layout and it can be embedded using simple shortcodes. Settings for playback can also be tweaked for individual playlists.
You can easily show or hide track numbers and covers. It is also possible to display the album art of current thumbnail more prominently.
It is also possible to integrate AudioIgniter with WooCommerce to sell individual tracks.
The overall layout of the playlists you create with AudioIgniter does look better compared to the Audio Album plugin. However, you lose the ability to customize every part of the player.
Final Thoughts
In this post, we have summarized the common features as well as the pros and cons of some popular and free WordPress audio player plugins. You can use them to embed individual audio files or whole playlists in your pages and posts.
People who are looking to embed a single audio file in their projects will find the Compact WP Audio Player and the HTML5 Audio Player plugins to be easy to use. Someone who wants the ability to create their own playlist will benefit from using the AudioIgniter plugin. However, if you need the option to fully customize the look of the music player, using Audio Album would be a better choice. Both these plugins offer the ability to create dedicated buttons to sell individual music files.
Finally, the Seriously Simple Podcasting plugin will serve you well if you are planning on creating and managing your podcasts with a WordPress website.
If these plugins don’t have all the features that you want or they don’t look very professional, give the premium WordPress Audio plugins in the Envato market a try. They start for as little as $11 and offer a huge set of features with six months of free support.
here.
Twitter or find him on LinkedIn.
