https://www.giardino-marling.com/media/mod_altea_headervideo/js/toggle-audio.js?b23f8e

1/**
2 * mod_altea_headervideo — floating mute / unmute button.
3 *
4 * Vanilla JS, no jQuery. Each button is bound to the video whose id it carries
5 * in data-ahv-video, so any number of module instances can coexist on a page.
6 *
7 * @copyright  (C) Altea. All rights reserved.
8 * @license    GNU General Public License version 2 or later
9 */
10(function () {
11	'use strict';
12
13	function bind(button) {
14		if (button.dataset.ahvBound === '1') {
15			return;
16		}
17
18		var video = document.getElementById(button.dataset.ahvVideo || '');
19
20		if (!video) {
21			return;
22		}
23
24		button.dataset.ahvBound = '1';
25
26		var labelEnable = button.dataset.ahvLabelEnable || 'Enable audio';
27		var labelDisable = button.dataset.ahvLabelDisable || 'Disable audio';
28
29		function sync() {
30			var muted = video.muted || video.volume === 0;
31
32			button.setAttribute('aria-pressed', muted ? 'false' : 'true');
33			button.setAttribute('aria-label', muted ? labelEnable : labelDisable);
34			button.setAttribute('title', muted ? labelEnable : labelDisable);
35		}
36
37		button.addEventListener('click', function () {
38			// Unmuting must happen inside the click handler: browsers only grant
39			// audio playback as the direct result of a user gesture. A video that
40			// was autoplaying muted therefore keeps playing, now with sound.
41			video.muted = !video.muted;
42
43			if (!video.muted) {
44				if (video.volume === 0) {
45					video.volume = 1;
46				}
47
48				if (video.paused) {
49					var playing = video.play();
50
51					if (playing && typeof playing.catch === 'function') {
52						playing.catch(function () {
53							// Playback refused by the browser: leave the video as it is.
54						});
55					}
56				}
57			}
58
59			sync();
60		});
61
62		// Keep the button in sync when the state changes elsewhere
63		// (e.g. through the native controls, which stay fully independent).
64		video.addEventListener('volumechange', sync);
65
66		sync();
67	}
68
69	function init() {
70		var buttons = document.querySelectorAll('.altea-headervideo__toggle-audio');
71		var i;
72
73		for (i = 0; i < buttons.length; i++) {
74			bind(buttons[i]);
75		}
76	}
77
78	if (document.readyState === 'loading') {
79		document.addEventListener('DOMContentLoaded', init);
80	} else {
81		init();
82	}
83})();