如何在Chrome扩展中实现带声音的通知弹出窗口 [英] How to implement a notification popup with sound in chrome extension
本文介绍了如何在Chrome扩展中实现带声音的通知弹出窗口的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
就像 Checker Plus for Gmail 您可以使用以下代码作为在桌面通知中播放声音的参考，它将< audio> 标签与桌面通知。
示范
manifest.json
已注册的通知权限和带清单文件的后台页面。
{
name：带音频的通知，
description：http://stackoverflow.com/questions/14917531/how-to-implement-a-notification-popup-with-sound
manifest_version：2，
version：1，
permissions：[
notifications
，
background：{
scripts：[
background.js
]
}
}
background.js
创建通知页面后台应用程序。
//创建HTML通知：
var notification = webkitNotifications.createHTMLNotification（
' notification.html'// html url - 可以是相对的
）;
//然后显示通知。
notification.show（）;
notification.html
播放一些随机歌曲
< html>
< body>
< p>播放歌曲时的一些不错的文字。< / p>
<音频自动播放>
< source src =http://www.html5rocks.com/en/tutorials/audio/quick/test.mp3type =audio / mpeg/>
< source src =http://www.html5rocks.com/en/tutorials/audio/quick/test.oggtype =audio / ogg/>
< / audio>
< / body>
< / html>
参考文献
How to implement a notification popup with sound in chrome extension.
Just like the Checker Plus for Gmail
解决方案
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
这篇关于如何在Chrome扩展中实现带声音的通知弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
