How WP_Query Powers the Drum Machine Sample Manager

By Jonathan Aquarone
120.0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Managing audio samples in WordPress applications requires careful consideration of database queries and performance. At the core of our drum machine app, WP_Query handles sample management through a custom post type system that validates post creation and seamlessly integrates with the Web Audio API. Let’s examine how this database interaction powers the app’s functionality.

There are two ways to implement drum sample management in the WordPress admin: through page-level ACF fields or via a custom post type. While page-level fields would work, a dedicated ‘Drum App‘ post type provides better organization and user access.

The custom post type creates a clear menu item in the admin panel, with ACF fields contained within a single post. To prevent duplicate entries, custom logic restricts post creation after the first instance. The post type is also set to non-public, preventing search engine indexing.

How WP_Query ACF and Custom Post Type Gets This Done

Custom Post Type Setup

The drum machine uses a dedicated post type to store sample sets:

register_post_type('drum_app', [
    'labels' => [
        'name' => 'Drum App',
        'singular_name' => 'Drum Sample'
    ],
    'public' => true,
    'supports' => ['title']
]);

WP_Query validates post creation to maintain a single instance

function validate_drum_app_instance() {
    $query = new WP_Query([
        'post_type' => 'drum_app',
        'posts_per_page' => 1,
        'fields' => 'ids', // Only get post IDs
        'no_found_rows' => true, 
        'cache_results' => false // Don't cache since we're just checking existence
    ]);
    
    return $query->have_posts();
}

Sample Management

Advanced Custom Fields handles WAV file uploads through three dedicated fields:

acf_add_local_field_group([
    'title' => 'Drum Samples',
    'fields' => [
        [
            'key' => 'field_kick_sample',
            'name' => 'kick_sample',
            'type' => 'file',
            'mime_types' => 'wav'
        ],
    ]
]);

Fetching the latest samples uses targeted query parameters:

//First, it creates a new WP_Query instance:
$query = new WP_Query([
    'post_type' => 'drum_app',
    'posts_per_page' => 1,
    'orderby' => 'date',
    'order' => 'DESC'
]);

//Then it gets the posts array from the query result:
$samples = $query->posts;

//Finally, it creates an associative array of sample URLs:
$sample_urls = [
    'kick' => get_field('kick_sample', $samples[0]->ID),
    'snare' => get_field('snare_sample', $samples[0]->ID),
    'hihat' => get_field('hihat_sample', $samples[0]->ID)
];

Conclusion

WP_Query is the ideal solution for this drum machine app since we need direct, efficient access to a single post’s sample data. While the WordPress REST API would work, it would introduce unnecessary overhead – making HTTP requests and processing JSON responses when we really just need quick, server-side access to the audio file URLs.

The REST API would require setting up endpoints, making HTTP requests, and handling responses – extra complexity we don’t need since we’re already in the WordPress environment. WP_Query keeps things simple and fast, which is exactly what we want for loading audio samples.