CODEWITHSUNDEEP
google-chrome-extensionnotifications
shawnXiao
shawnXiao

Reputation: 880

How to implement a notification popup with sound in chrome extension

How to implement a notification popup with sound in chrome extension.

Just like the Checker Plus for Gmail

Upvotes: 20

Views: 22980

Answers (2)

Free
Free

Reputation: 663

I think that createHTMLNotification has been deprecated since the accepted answer was written. For anyone happening upon this thread now, here's a method that works as of January 2014 assuming that you have notifications permissions in your manifest:

background.js

createNotification();
audioNotification();

function audioNotification(){
    var yourSound = new Audio('yourSound.mp3');
    yourSound.play();
}

function createNotification(){
    var opt = {type: "basic",title: "Your Title",message: "Your message",iconUrl: "your_icon.png"}
    chrome.notifications.create("notificationName",opt,function(){});

    //include this line if you want to clear the notification after 5 seconds
    setTimeout(function(){chrome.notifications.clear("notificationName",function(){});},5000);
}

The general idea here is just that you'll send out the regular notification and then just use a normal JavaScript method for playing a sound immediately on the heels of the notification's creation. Of course there are other ways to do it and to organize it, but I think this is pretty clear and very easy to implement in most cases.

Upvotes: 34

Sudarshan
Sudarshan

Reputation: 18534

You can use following code as a reference for playing sound in desktop notifications, it uses <audio> tag in conjunction with Desktop Notifications.

Demonstration

manifest.json

Registered notification permissions and background page with manifest file.

{
    "name": "Notification with Audio",
    "description": "http://stackoverflow.com/questions/14917531/how-to-implement-a-notification-popup-with-sound-in-chrome-extension",
    "manifest_version": 2,
    "version": "1",
    "permissions": [
        "notifications"
    ],
    "background": {
        "scripts": [
            "background.js"
        ]
    }
}

background.js

Created a notification page from background application.

// create a HTML notification:
var notification = webkitNotifications.createHTMLNotification(
    'notification.html' // html url - can be relative
);

// Then show the notification.
notification.show();

notification.html

Playing some random songs

<html>
    <body>
        <p>Some Nice Text While Playing Song.. </p>
        <audio autoplay>
        <source src="http://www.html5rocks.com/en/tutorials/audio/quick/test.mp3" type="audio/mpeg" />
        <source src="http://www.html5rocks.com/en/tutorials/audio/quick/test.ogg" type="audio/ogg" />
        </audio>
    </body>
</html>

References

Upvotes: 7

Related Questions