How to change the Push Notification sound?


#1

Hi Everybody !

We would like to make our Desktop App more recognizable by its own notification sound (like Slack or other desktop apps).
Do you know a way to change the push notification sound when electron emits them ?

Thanks a lot for your advices,

Clovis team from France


#2

The HTML audio element can be controlled with javascript.


#3

Thank you john,

I saw this documentation before but i didn’t found the way to use it directly in electron to change push notification’s sound (sorry i’m early developper…)

In my electron folder, i use these 3 files for my app:

  • main.js
  • browser.html
  • browser.js

Do you have an idea of implementation ?

Thanks a lot !


#4

Notifications sent from Electron do not have an associated sound on my system so I’m not sure what you mean by “change push notification’s sound.” Can you show the code you are using to send notifications?


#5

I use the code in this example: https://github.com/hokein/electron-sample-apps/tree/master/notifications

here is window.html

<!DOCTYPE HTML>
<html>
	<head>
		<title>Notifications Sample</title>
	</head>
	<body>
		<h1>Notifications Sample</h1>
		<p>This sample demonstrates the use of the Notifications API. Use buttons below to create various different notifications.</p>
		<div class="sample">
			<button id="basic">Basic Notification</button>
			<span>Basic notification: default icon, title, and message. </span>
		</div>
		<div class="sample">
			<button id="image">Image Notification</button>
			<span>Image notification: icon, title, image, and message.(Only available on OS X Yosemite)</span>
		</div>
		<script src="window.js"></script>
	</body>
</html>

here is window.js

   var path = require('path');
var options = [
  {
    title: "Basic Notification",
    body: "Short message part"
  },
  {
    title: "Content-Image Notification",
    body: "Short message plus a custom content image",
    icon: path.join(__dirname, 'icon.png')
  }
]

function doNotify(evt) {
  if (evt.srcElement.id == "basic") {
    new Notification(options[0].title, options[0]);
  }
  else if (evt.srcElement.id == "image") {
    new Notification(options[1].title, options[1]);
  }
}

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("basic").addEventListener("click", doNotify);
  document.getElementById("image").addEventListener("click", doNotify);
})

#6

Here is the exact sound i want to modify and put my own: https://www.youtube.com/watch?v=_alKygvQYoc


#7

You should be able to just add

const noise = new Audio('/path/to/noise.ogg')
noise.play()

to your doNotify function.


#8

We are close !

With that i can here my sound, but the both are playing together… how to remove the native one ?

function doNotify(evt) {
  if (evt.srcElement.id == "basic") {
    new Notification(options[0].title, options[0]);
  }
  else if (evt.srcElement.id == "image") {
    new Notification(options[1].title, options[1]);
  }

  const noise = new Audio('file://' + __dirname + '/knock_brush.mp3');
  noise.play();

}

#9

see:


#10

:confused: Hmm you think there’s no way to remove the system sound ?

So for example how Slack team is doing it ? (Slack is built with Electron and they have their own notification sound)


#11

I think Slack uses a custom notification implementation.


#12

thanks a lot John ! i’ll try node-notifier and see how we can manage the sound with it


#13

again, i can do what i want with node notifier :slight_smile: thanks !


#14


Shows notification with custom sound.