commit d98ba1a7cc4082b84304decbb96243218250d194 Author: Alexander Bass Date: Fri Feb 17 10:21:55 2023 -0500 init diff --git a/AVcontrolsync.js b/AVcontrolsync.js new file mode 100644 index 0000000..5093b6c --- /dev/null +++ b/AVcontrolsync.js @@ -0,0 +1,47 @@ +"use strict"; +var GLOBAL_VOLUME; +let mediaElements = []; + +document.addEventListener("DOMContentLoaded", () => { + console.log("Loaded"); + + mediaElements = Array.from(document.getElementsByTagName("audio")); + mediaElements.push(...Array.from(document.getElementsByTagName("video"))); + mediaElements = mediaElements.filter((el) => { + return el.controls; + }); + + console.log(`Watching: ${mediaElements.length} media elements`); + mediaElements.forEach((el) => { + el.addEventListener("volumechange", (e) => { + updateGlobalVolume(e.target.volume); + }); + el.addEventListener("play", (e) => { + stopAllOtherMedia(e.target); + }); + }); + + const cookie = document.cookie; + if (cookie) { + const volume = JSON.parse(document.cookie).vol; + updateGlobalVolume(volume); + } +} +); + +function stopAllOtherMedia(playingElement) { + mediaElements.forEach((el) => { + if (el === playingElement) { + return; + } + el.pause(); + }); +} + +function updateGlobalVolume(newVolume) { + GLOBAL_VOLUME = newVolume; + mediaElements.forEach((el) => { + el.volume = GLOBAL_VOLUME; + }); + document.cookie = `{\"vol\":${GLOBAL_VOLUME}}; SameSite=None; Secure`; +} \ No newline at end of file diff --git a/example.html b/example.html new file mode 100644 index 0000000..725d9df --- /dev/null +++ b/example.html @@ -0,0 +1,14 @@ + + + + + + + + +

+ + diff --git a/example.mp3 b/example.mp3 new file mode 100644 index 0000000..258f076 Binary files /dev/null and b/example.mp3 differ diff --git a/readme.md b/readme.md new file mode 100644 index 0000000..a035860 --- /dev/null +++ b/readme.md @@ -0,0 +1,6 @@ +# HTML 5 Audio/Video controls syncer + +This simple script makes it easier to use multiple `