页面更改时 Tampermonkey 播放声音？答案

【问题标题】：Tampermonkey play sound when page changes?页面更改时 Tampermonkey 播放声音？
【发布时间】：2018-05-10 08:19:14
【问题描述】：

基本上，我访问了一个特定的网站，我在计时器上设置了用户脚本自动刷新。此特定页面在刷新时会不时更改内容。我希望在页面刷新和任何页面更改发生时播放声音。

这是我目前收集的代码，但我仍然需要一些东西才能让它正常运行：

// ==UserScript==
// @name     Auto-Refresh
// @include  https://www.prolific.ac/studies
// ==/UserScript==

//--- https://stackoverflow.com/questions/25484978/i-want-a-simple-greasemonkey-script-to-reload-the-page-every-minute
setTimeout(function(){ location.reload(); }, 20*1000);

var player = document.createElement('audio');
player.src = 'https://notificationsounds.com/soundfiles/a86c450b76fb8c371afead6410d55534/file-sounds-1108-slow-spring-board.mp3';
player.preload = 'auto';

  // Play a sound with condition and then player.play()

所以脚本的其余部分基本上是“如果发生页面更改（刷新后），则播放声音。”这就是我遇到麻烦的地方。

我一直使用这个线程作为指导：How to monitor a static HTML page for changes with Greasemonkey? Use a hash? 但我不太确定哪种方法最有效。任何和所有的建议将不胜感激。提前致谢。

【问题讨论】：

标签： javascript google-chrome userscripts page-refresh tampermonkey

【解决方案1】：

根据我的经验，您希望检查特定元素的变化，而不是整个页面的 HTML，因为页面的技术部分通常会发生变化（时间戳、计数器、随机生成的 ID、广告）。所以我使用 jQuery 来查找我然后检查更改的部分。

我想您可以通过执行以下操作来检查页面整个部分的更改：

var player = document.createElement('audio');
player.src = 'https://notificationsounds.com/soundfiles/a86c450b76fb8c371afead6410d55534/file-sounds-1108-slow-spring-board.mp3';
player.preload = 'auto';

// First you store the content
var initialContent = $('.articles-section').html();

// Then next time you compare that content to the newly retrieved content
var newContent = $('.articles-section').html();
if (newContent !== initialContent) {
    player.play();
}

您将不得不使用某种持久性存储，我想您可以为此使用localStorage。见HTML5 Web Storage。

【讨论】：

【解决方案2】：

这部分

var player = document.createElement('audio');
player.src = 'https://notificationsounds.com/soundfiles/a86c450b76fb8c371afead6410d55534/file-sounds-1108-slow-spring-board.mp3';
player.preload = 'auto';

只有在我这样做的时候才对我有用

player.play() 而不是player.preload = 'auto'

【讨论】：