Simple Ajax Chat Pro (SAC Pro) provides an option to enable sound alerts for new chat messages. Under SAC Pro settings ▸ Notifications ▸ Sound Alerts, you can choose from six sound effects, or choose to disable the alerts. The provided sound options are clean and simple, but you may want to go further with your own. This tutorial explains how to use your own custom audio clips for sound alerts.

Tip: Just getting started with SAC Pro? Check out the Quick Start Guide »

Custom sound alerts

To use your own audio clip for the sound alerts, you will need both MP3 and OGG formats. So for example, we could use the following two files:

  • snorts.mp3 — audio alert in MP3 format
  • snorts.ogg — audio alert in OGG format

The names of the files can be whatever you want. Using the same name for both formats is recommended to keep things simple and organized, etc. Once you have your sound files, copy them to your theme directory, say inside of a folder named /sac/. Like this:

/your-theme/sac/snort.mp3
/your-theme/sac/snort.ogg

Finally, add the following code to your theme (or child theme) functions.php (or add via simple custom plugin).

// SAC Pro custom sound alert (MP3)
function sacpro_audio_alert_mp3($url) {
	return get_stylesheet_directory_uri() .'/sac/snorts.mp3'; // <-- path/name
}
add_action('sacpro_audio_alert_mp3', 'sacpro_audio_alert_mp3');

// SAC Pro custom sound alert (OGG)
function sacpro_audio_alert_ogg($url) {
	return get_stylesheet_directory_uri() .'/sac/snorts.ogg'; // <-- path/name
}
add_action('sacpro_audio_alert_ogg', 'sacpro_audio_alert_ogg');

..aand done. The only required change is for the file path and name. You will notice in the code where it says /sac/snorts.mp3 and /sac/snorts.ogg. Change those to match the actual path and name of your two audio files.

Note: After adding the above code, it will override the plugin setting, Notifications ▸ Sound Alerts. So whatever is selected for that setting will be ignored and replaced with your custom sounds.

What is the above code doing? It simply returns two URLs to SAC Pro. So they can be used for the chat sound alerts. Specifically, the URLs are used in the HTML for the <audio> element. Here is an example of the default markup:

<audio id="sacpro-audio-alert">
	<source src="https://example.com/wp-content/plugins/simple-ajax-chat-pro/audio/default.mp3"></source>
	<source src="https://example.com/wp-content/plugins/simple-ajax-chat-pro/audio/default.ogg"></source>
	<!-- this browser does not support audio -->
</audio>

Notice the URLs in the markup. They refer to audio files that are included within the SAC Pro plugin. So now, after adding the two custom functions to your theme, the audio markup will look like this:

<audio id="sacpro-audio-alert">
	<source src="https://example.com/wp-content/themes/your-theme/sac/snorts.mp3"></source>
	<source src="https://example.com/wp-content/themes/your-theme/sac/snorts.ogg"></source>
	<!-- this browser does not support audio -->
</audio>

Now notice the URLs. They refer to the audio files located in your theme folder.

So that’s all there is to it. Custom audio for sound alerts.

Advanced: Customize the Audio Markup

It shouldn’t be necessary, but the plugin makes it possible to customize the entire audio markup. This may be useful for customization of attributes, loading, and other properties. Here is the code to make it happen, added to your theme functions or simple plugin:

function sacpro_audio_alert_markup($output) {
	
	$url_mp3 = get_stylesheet_directory_uri() .'/sac/snorts.mp3';
	$url_ogg = get_stylesheet_directory_uri() .'/sac/snorts.ogg';
	
	$output  = '<audio id="sacpro-audio-alert">';
	$output .= '<source src="'. esc_url($url_mp3) .'"></source>';
	$output .= '<source src="'. esc_url($url_ogg) .'"></source>';
	$output .= '<!-- this browser does not support audio -->';
	$output .= '</audio>';
	
	return $output;
	
}
add_action('sacpro_audio_alert_markup', 'sacpro_audio_alert_markup');

This function returns the block of audio markup (used for sound alerts). This code can be used instead of the previous technique to include custom audio files. Customize other details as desired.