Saving Memory: Dynamically Displaying Audio Files with WordPress

Saving Memory: Dynamically Displaying Audio Files with WordPress

Lately, I've been volunteering on a WordPress project for a client with another developer. We're using LifterLMS; a plugin to handle the internal operations of the course, but the front-end is lacking for my needs. Our course has lots of audio files, some of which have file sizes greater than 8MB. We want a course that's accessible to everyone, even people who are learning on their phone. If they're not on WiFi, we're going to be killing their data with high quality files.

So here's the mission:

  • If the user is on a computer or tablet (on an average basis, connected to WiFi) serve the original quality audio file
  • If the user is on a phone, serve the same audio file at a reduced bitrate. 32 Kbps to be exact. Sorry audiophiles, but having a 16MB size file compress down to 2MB is nice.

The only draw to this process is that we have to store the high and low quality files on the server in the WP-Uploads folder. It's alright if we use more of our data storage. The final chore to make this a reality would be a JavaScript that would only run if the user is on a `Lesson` page.

So, first of all, I had to enqueue the script that I would be using in the `functions.php` file for my theme:

function dynamicScriptLoad() {
    // Using `is_page` causes an error
    if (is_page()) {
        if (is_lesson()) {
            wp_enqueue_script('audioServe', get_stylesheet_directory_uri() . '/js/dynamicAudioServe.js', array(), 1.0)
        }
    }
}
add_action('wp_enqueue_scripts', 'dynamicScriptLoad')

I was running into a wall, and the code wasn't running like I thought it would. The error came out to be the is_page() conditional call being used before is_lesson() conditional. Just using is_lesson() was fine enough.

function dynamicScriptLoad() {
    if (is_lesson()) {
        wp_enqueue_script('audioServe', get_stylesheet_directory_uri() . '/js/dynamicAudioServe.js', array(), 1.0)
    }
}

Anyway, now I could get to work on the JavaScript. I could use CSS with the addition of an .active class to dynamically change the `display` property. If we don't pre-load the audio files, then I'll still be able to have close to the same amount of data savings between phone usage and desktop usage. I whipped up a really quick script from there:

window.onload = function() {
	var smallFiles = document.getElementsByClassName('mobile-audio');
	var largeFiles = document.getElementsByClassName('desktop-audio');
	var smallView = true;
	if (screen.width > 736) {
		smallView = false;
	}

	if (smallView) {
		for (var i = 0; i < smallFiles.length; i++) {
			console.log(smallFiles[i])
			smallFiles[i].class = smallFiles[i].classList.add('active');
		}
	}
	else {
		for (var i = 0; i < largeFiles.length; i++) {
			largeFiles[i].class = largeFiles[i].classList.add('active');
		}
	}
}

This script looks at the screen.width of the device that is viewing the page, and adds the active class to all the DOM elements that also have the mobile-audio class, if screen.width < 736px, and vice versa if the width is over.


Tags: wordpress, lifterLMS, code
Modified on: Tue Jul 18 2017 12:43:22 GMT-0400 (EDT)