Tampermonkey воспроизводить звук при изменении страницы? - PullRequest
0 голосов
/ 10 мая 2018

В основном, я посещаю определенный веб-сайт, на котором таймер автоматического обновления пользовательского сценария установлен. Эта конкретная страница время от времени меняет содержимое после обновления. Я хочу, чтобы звук воспроизводился всякий раз, когда страница обновляется и происходят какие-либо изменения.

Вот код, который я сейчас собрал, но мне все еще нужно несколько вещей для его правильной работы:

// ==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()

Таким образом, в основном оставшаяся часть сценария будет выглядеть так: «если произойдет изменение страницы (после обновления), воспроизведите звук». Вот где у меня проблемы.

Я использую эту ветку в качестве руководства: Как отслеживать статическую HTML-страницу на наличие изменений с помощью Greasemonkey? Использовать хеш? Но я не совсем уверен, какой метод подойдет лучше всего. Любой совет будет высоко ценится. Заранее спасибо.

1 Ответ

0 голосов
/ 03 августа 2018

По моему опыту, вы хотите проверить наличие изменений в определенных элементах, а не в HTML всей страницы, потому что часто меняются технические части страницы (временные метки, счетчики, случайно сгенерированные идентификаторы, реклама). Поэтому я использовал 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 .

...