I am looking for your help in building a Shazam clone using the Rapid API: https://rapidapi.com/apidojo/api/shazam/ , I am using the songs/v2/detect endpoint.
In my backend I am converting the raw audio file to byte array and base64 encoding it before calling the Rapid Hub API.
I am trying to record the audio using React and Web Audio API in my frontend code which is not working.
Here is my frontend code for your reference:
import React, { useState, useEffect } from 'react';
import axios from 'axios';
function AudioRecorder() {
const [recording, setRecording] = useState(false);
const [mediaRecorder, setMediaRecorder] = useState(null);
const [audioChunks, setAudioChunks] = useState([]);
const audioConstraints = {
audio: {
channelCount: 1, // Set to 1 for Mono
sampleRate: 44100, // Set to 44100 Hz
sampleSize: 16, // Set to 16 bits
},
};
useEffect(() => {
if (mediaRecorder) {
mediaRecorder.addEventListener('dataavailable', handleDataAvailable);
mediaRecorder.addEventListener('stop', handleRecordingStopped);
}
}, [mediaRecorder]);
const handleDataAvailable = (event) => {
if (event.data.size > 0) {
setAudioChunks((prevChunks) => [...prevChunks, event.data]);
}
};
const handleRecordingStopped = () => {
setRecording(false);
};
const startRecording = () => {
navigator.mediaDevices.getUserMedia(audioConstraints)
.then((stream) => {
const newMediaRecorder = new MediaRecorder(stream);
setMediaRecorder(newMediaRecorder);
setRecording(true);
newMediaRecorder.start();
})
.catch((error) => {
console.error('Error accessing microphone:', error);
});
};
const stopRecording = () => {
if (mediaRecorder) {
mediaRecorder.stop();
}
};
const handleUpload = () => {
if (audioChunks.length > 0) {
const combinedBlob = new Blob(audioChunks, { type: 'audio/raw' });
const formData = new FormData();
formData.append('audio', combinedBlob, 'recording.raw');
axios.post('http://localhost:8080/api/v1/shazam/songDetection', formData)
.then((response) => {
console.log('Audio uploaded successfully:', response);
})
.catch((error) => {
console.error('Error uploading audio:', error);
});
}
};
return (
<div>
<button onClick={startRecording} disabled={recording}>
Start Recording
</button>
<button onClick={stopRecording} disabled={!recording}>
Stop Recording
</button>
<button onClick={handleUpload} disabled={audioChunks.length === 0}>
Upload Audio
</button>
</div>
);
}
export default AudioRecorder;
Whereas I am using a Python script to record audio and that seems to be working in detecting the song using the Rapid Hub API.
Here is the python script for your reference:
#!/usr/bin/env python3
import pyaudio
import wave
def record_audio(output_file):
# Configure audio recording parameters
CHUNK = 1024 # Number of audio frames per buffer
FORMAT = pyaudio.paInt16 # Sample format (16-bit integer)
CHANNELS = 1 # Number of audio channels (mono)
RATE = 44100 # Sample rate
# Create an instance of the PyAudio class
audio = pyaudio.PyAudio()
# Open the audio stream for recording
stream = audio.open(format=FORMAT,
channels=CHANNELS,
rate=RATE,
input=True,
frames_per_buffer=CHUNK)
# Create a buffer to store the recorded audio frames
frames = []
# Record audio frames
print("Recording started. Press Ctrl+C to stop.")
try:
while True:
data = stream.read(CHUNK)
frames.append(data)
except KeyboardInterrupt:
pass
# Stop and close the audio stream
stream.stop_stream()
stream.close()
audio.terminate()
# Save the recorded audio as a raw audio file (PCM or WAV)
with open(output_file, "wb") as file:
file.write(b"".join(frames))
print(f"Recording saved to {output_file}.")
if __name__ == '__main__':
output_file = "recorded_audio.raw" # Replace with your desired file name and extension
record_audio(output_file)
Can you help me figure out what i am doing wrong in the React code?
I keep getting empty response from the API and the documentation mentions that If the result is empty, your request data must be in wrong format in most case.
Tried to update my frontend to record audio in the following format 44100Hz, 1 channel (Mono), signed 16 bit PCM little endian. Doesnt seem to work.
EDIT:
I tried the following with extendable-media-recorder
import { MediaRecorder } from 'extendable-media-recorder';
import { useEffect, useState } from 'react';
import axios from 'axios';
function RecorderAudio() {
const audioConstraints = {
audio: {
sampleRate: 44100,
channelCount: 1, // Set to 1 for Mono
sampleSize: 16, // Set to 16 bits
},
};
const [recording, setRecording] = useState(false);
const [mediaRecorder, setMediaRecorder] = useState(null);
const [audioChunks, setAudioChunks] = useState([]);
useEffect(() => {
if (mediaRecorder) {
mediaRecorder.addEventListener('dataavailable', handleDataAvailable);
mediaRecorder.addEventListener('stop', handleRecordingStopped);
}
}, [mediaRecorder]);
const handleDataAvailable = (event) => {
if (event.data.size > 0) {
setAudioChunks((prevChunks) => [...prevChunks, event.data]);
}
};
const handleRecordingStopped = () => {
setRecording(false);
};
async function startRecording() {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const audioContext = new AudioContext({ sampleRate: 44100 });
const mediaStreamAudioSourceNode = new MediaStreamAudioSourceNode(audioContext, { mediaStream: stream });
const mediaStreamAudioDestinationNode = new MediaStreamAudioDestinationNode(audioContext);
mediaStreamAudioSourceNode.connect(mediaStreamAudioDestinationNode);
const mediaRecorder = new MediaRecorder(mediaStreamAudioDestinationNode.stream, { type: "audio/mp3" });
setMediaRecorder(mediaRecorder);
setRecording(true);
mediaRecorder.start();
};
const stopRecording = () => {
if (mediaRecorder) {
mediaRecorder.stop();
}
};
const handleUpload = () => {
if (audioChunks.length > 0) {
const combinedBlob = new Blob(audioChunks, { type: 'audio/mp3' });
const formData = new FormData();
formData.append('audio', combinedBlob, 'recording.mp3');
axios.post('http://localhost:8080/api/v1/shazam/songDetection', formData, {
headers: {
'Content-Type': 'multipart/form-data'}})
.then((response) => {
console.log('Audio uploaded successfully:', response);
})
.catch((error) => {
console.error('Error uploading audio:', error);
});
}
};
return (
<div>
<button onClick={startRecording} disabled={recording}>
Start Recording
</button>
<button onClick={stopRecording} disabled={!recording}>
Stop Recording
</button>
<button onClick={handleUpload} disabled={audioChunks.length === 0}>
Upload Audio
</button>
</div>
);
};
export default RecorderAudio;
