Last active
January 7, 2024 16:26
-
-
Save vogler/275939bf98efa9ccfd204c0145e1e658 to your computer and use it in GitHub Desktop.
Tampermonkey: Instagram: enable sound in stories
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ==UserScript== | |
// @name Instagram: unmute stories | |
// @namespace https://gist.github.com/vogler | |
// @downloadURL https://gist.github.com/vogler/275939bf98efa9ccfd204c0145e1e658/raw/sound.stories.instagram.tamper.js | |
// @version 0.8 | |
// @description Clicks the button to enable sound in stories. I want to have sound by default, but there's no option. Clicking it manually everytime is annoying and you can't even click it before you reach a story with sound. | |
// @author Ralf Vogler | |
// @match https://www.instagram.com/* | |
// only needed for https://www.instagram.com/stories/*, but that would only execute it on reload, not if clicked on a story from the start page (router just changes the URL) | |
// @grant none | |
// ==/UserScript== | |
(function() { | |
'use strict'; | |
const f = el => { | |
//console.log(el, el.querySelector); | |
if (!el.querySelector) return; // could only search the added element, but we search the whole document | |
// we identify the unmute button via its label, which is dependent on the set language (and also potentially the region/country, see en-DE vs. en-GB): | |
let btn = document.querySelector('svg[aria-label="Audio is muted"]')?.closest('[role="button"]') // [en-DE] - was "Audo is muted." before but seems to be fixed now. | |
|| document.querySelector('svg[aria-label="Ton stummgeschaltet"]')?.closest('[role="button"]') // [de-DE] | |
|| document.querySelector('svg[aria-label="Audio is muted"]')?.closest('[type="button"]'); // [en-GB] | |
let strategy = 1; | |
// alternative/fallback for other langauges would be to select button via structure (which may change) and check the used svg icon via its viewBox (both icons in one svg with changed offset) | |
// btn = null; // uncomment to always use this strategy | |
if (!btn) { | |
strategy = 2; | |
const svgs = document.querySelectorAll('header svg[aria-label][height="16"]'); // [height="16"] is only required to filter out the svg for verified users which has an (empty) aria-label and [height="12"] | |
const svg = svgs[1]; | |
if (svg && svg.viewBox.baseVal.width == 48) { | |
btn = svg.parentElement.parentElement; | |
} | |
} | |
if (btn) { | |
console.log('unmute!', strategy, btn); | |
btn.click(); | |
} | |
}; | |
// handle dynamically loaded items | |
(new MutationObserver((ms, ob) => ms.forEach(m => m.addedNodes.forEach(f)))).observe(document.body, { childList: true, subtree: true }); | |
// {subtree: false}: 2 calls for initial load, 1 for after; {subtree: true}: 4 calls for initial load, 3 for after | |
// can't use {subtree: false} since it only works when first opened story has muted sound | |
// to reduce the number of calls, we could only call f on (soft) navigation, however, then it wouldn't be called when directly opening a story or reloading one: | |
// navigation.addEventListener("navigate", console.log); | |
})(); |
Just saw that there's also English (UK) besides English, but for both it's role="button"
for me.
I included your selector (and one for de-DE
) as alternatives.
Also added some fallback that doesn't rely on labels, but the DOM structure and the viewBox offset of the svg.
That should work for any language as long as there are no changes ๐
Very nice, thank you very much for patching it for the rest of us ๐
They changed the labels. I updated the script. Works again for me.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Great script!
It seems Instagram has changed some things since your last update (and fixed the typo).
This is what worked for me, simply edit the
const
on line19
: