Skip to main content

​
Overview

SoundWave implements intelligent filtering to ensure you get the most relevant, high-quality music results. The filtering system removes official music videos, matches search terms accurately, and prioritizes audio-focused content.

​
Filter Architecture

1

Data Extraction

Parse video metadata including title, video ID, and duration from search results.
2

Term Matching

Verify that results match your search query using multiple matching strategies.
3

Content Filtering

Exclude official music videos and promotional content for better audio quality.
4

Result Presentation

Display filtered, relevant results grouped for easy navigation.

​
Search Term Matching

SoundWave uses sophisticated matching logic to ensure results are relevant to your search:

​
Matching Strategies

Checks if the video title contains your entire search term:
const searchTerm = originalSearchTerm.toLowerCase();
const songTitle = result.title.toLowerCase();

// Partial match: entire search term appears in title
const includesSearchTerm = songTitle.includes(searchTerm);
Example: Searching for “bohemian rhapsody” matches “Bohemian Rhapsody - Queen (Cover)”
Ensures all words in your search appear in the title:
// Word-by-word match: all search words must appear
const includesSearchTerm = searchTerm.split(' ').every(term => songTitle.includes(term));
Example: Searching for “queen rock” matches “Rock Song by Queen” even if words are in different order

​
Complete Filtering Logic

Here’s the full implementation used in both suggestions and search results: 
.filter(result => {
    // Filter results that include the artist or song name
    const searchTerm = originalSearchTerm.toLowerCase();
    const songTitle = result.title.toLowerCase();

    // Verify if the title includes the artist or song name
    const includesSearchTerm = (
        songTitle.includes(searchTerm) || // Partial match
        searchTerm.split(' ').every(term => songTitle.includes(term)) // All words match
    );

    // Exclude songs containing "oficial" or "Official"
    const excludesOfficial = !songTitle.includes('oficial') && !songTitle.includes('official');

    return includesSearchTerm && excludesOfficial;
});
Search terms are normalized to lowercase to ensure case-insensitive matching.

​
Official Content Filtering

SoundWave automatically excludes official music videos to prioritize audio-focused content:

​
Why Filter Official Videos?

Audio Quality

User-uploaded audio often has better compression for music streaming

Faster Loading

Audio-only content loads faster than video streams

Lower Bandwidth

Saves data by streaming audio instead of video

Copyright Issues

Official videos may have more geographical restrictions

​
Implementation

// Exclude songs containing "oficial" or "Official"
const excludesOfficial = !songTitle.includes('oficial') && !songTitle.includes('official');
This filter excludes any title containing “official” or “oficial” in any case.

​
Suggestion Filtering

Suggestions use the same filtering logic but with an additional limit: 
function processSuggestionsData(data) {
    const parser = new DOMParser();
    const doc = parser.parseFromString(data, 'text/html');
    const divs = doc.querySelectorAll('div.video-card-row');

    // Filter and show suggestions
    const newSuggestions = Array.from(divs)
        .map(div => {
            const link = div.querySelector('a');
            const titleElement = link ? link.querySelector('p') : null;
            const title = titleElement ? titleElement.innerText : 'Sin título';
            const videoId = link ? link.getAttribute('href').split('v=')[1] : null;
            const lengthElement = div.querySelector('.length');
            const length = lengthElement ? lengthElement.innerText : 'Desconocida';
            return { title, videoId, length };
        })
        .filter(suggestion => {
            const searchTerm = originalSearchTerm.toLowerCase();
            const songTitle = suggestion.title.toLowerCase();

            const includesSearchTerm = (
                songTitle.includes(searchTerm) ||
                searchTerm.split(' ').every(term => songTitle.includes(term))
            );

            const excludesOfficial = !songTitle.includes('oficial') && 
                                    !songTitle.includes('official');

            return includesSearchTerm && excludesOfficial;
        });

    // Limit to 5 suggestions
    const limitedSuggestions = newSuggestions.slice(0, 5);

    // Only update if suggestions changed
    if (JSON.stringify(limitedSuggestions) !== JSON.stringify(currentSuggestions)) {
        currentSuggestions = limitedSuggestions;
        showItems(currentSuggestions, suggestionsContainer, true);
    }
}
Suggestions are limited to 5 items to prevent overwhelming the interface. Full search results show all filtered matches.

​
Data Extraction

​
Parsing Video Metadata

SoundWave extracts structured data from search results: 
.map(div => {
    const link = div.querySelector('a');
    const titleElement = link ? link.querySelector('p') : null;
    const title = titleElement ? titleElement.innerText : 'Sin título';
    const videoId = link ? link.getAttribute('href').split('v=')[1] : null;
    return { title, videoId };
})

​
Extracted Fields

Title

The video/song title used for filtering and display

Video ID

YouTube video identifier for playback

Duration

Video length (suggestions only)

​
Result Deduplication

Suggestions are compared to prevent duplicate updates: 
// Only update if suggestions changed
if (JSON.stringify(limitedSuggestions) !== JSON.stringify(currentSuggestions)) {
    currentSuggestions = limitedSuggestions;
    showItems(currentSuggestions, suggestionsContainer, true);
}
This prevents unnecessary DOM updates when suggestions haven’t changed, improving performance.

​
Custom Filtering

You can modify the filtering behavior by adjusting the filter function:

​
Examples

// Remove official filter to include live performances
const excludesOfficial = !songTitle.includes('official');
// Only excludes "official", allows "oficial"

​
Filter Performance

​
Optimization Techniques

1

Lowercase Normalization

Convert strings to lowercase once, reuse for all comparisons.
2

Early Returns

Use boolean short-circuit evaluation to skip unnecessary checks.
3

Array Methods

Leverage native filter() and map() for optimal performance.
4

Result Caching

Store filtered results to avoid re-filtering on navigation.

​
Filter Statistics

SoundWave processes results efficiently:
  • Search Pages: 6 pages per search (up to 120 videos)
  • Suggestion Limit: 5 items maximum
  • Group Size: 5 results per page
  • Filter Pass Rate: Typically 30-50% of results pass filters

​
Edge Cases

​
Empty Results

If all results are filtered out, you’ll see an empty result set. Try:
  • Broadening your search terms
  • Using fewer specific words
  • Checking spelling

​
Special Characters

The filter handles special characters in titles: 
const searchTerm = originalSearchTerm.toLowerCase(); // Preserves special chars
const songTitle = result.title.toLowerCase();
Special characters like accents, apostrophes, and hyphens are preserved during filtering.

​
Filter Customization

To create your own filtering rules:
1

Locate Filter Function

Find the .filter() call in scripts.js or back.js
2

Modify Conditions

Adjust the boolean logic for includesSearchTerm or excludesOfficial
3

Test Changes

Perform searches to verify your new filtering behavior
4

Fine-tune

Adjust based on result quality and relevance

​
Best Practices

  1. Specific Searches: Use artist name + song title for best filtering results
  2. Avoid Generic Terms: Terms like “music” or “song” bypass filters less effectively
  3. Trust the Filters: Official content is filtered for good reasons
  4. Review Multiple Results: Browse through result groups if first group isn’t ideal

​
Next Steps

Search Guide

Master advanced search techniques

Playback Controls

Learn about audio playback features

Build docs developers (and LLMs) love

Get started for freeTalk to us