I used ChatGPT to create this UserScript when someone was asking for a fast-forward and rewind feature in WFMU’s archive player. I have often wanted something like for myself, too.<\/p>\n\n\n\n
<code>\/\/ ==UserScript==\n\/\/ @name WFMU AccuPlayer \u00b110s\n\/\/ @namespace local\n\/\/ @version 1.1\n\/\/ @description Add 10-second rewind and fast-forward buttons to WFMU AccuPlayer\n\/\/ @match *:\/\/*.wfmu.org\/archiveplayer\/*\n\/\/ @grant none\n\/\/ @lastUpdated 2026-03-14\n\/\/ ==\/UserScript==\n\n(() => {\n 'use strict';\n\n const STEP = 10;\n const BTN_CLASS = 'wfmu-skip-button';\n\n const jump = (player, delta) => {\n if (!player || !Number.isFinite(player.duration)) return;\n player.currentTime = Math.max(0, Math.min(player.currentTime + delta, player.duration));\n };\n\n const makeButton = (label, title, onClick) => {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = BTN_CLASS;\n btn.textContent = label;\n btn.title = title;\n btn.addEventListener('click', onClick);\n return btn;\n };\n\n const isEditable = (el) =>\n el instanceof HTMLInputElement ||\n el instanceof HTMLTextAreaElement ||\n el?.isContentEditable;\n\n const addStyles = () => {\n if (document.getElementById('wfmu-skip-styles')) return;\n\n const style = document.createElement('style');\n style.id = 'wfmu-skip-styles';\n style.textContent = `\n .${BTN_CLASS} {\n min-width: 44px;\n height: 44px;\n padding: 0 10px;\n border: 1px solid #000;\n border-radius: 999px;\n background: #000;\n color: #fff;\n cursor: pointer;\n font: 600 14px\/1 sans-serif;\n }\n `;\n document.head.append(style);\n };\n\n const init = () => {\n const player = document.querySelector('#audio-player');\n const transport = document.querySelector('.transport');\n const playButton = document.querySelector('#play-button');\n\n if (!player || !transport || !playButton) return false;\n if (document.querySelector(`.${BTN_CLASS}`)) return true;\n\n addStyles();\n\n playButton.before(\n makeButton('\u00ab 10', 'Back 10 seconds', () => jump(player, -STEP))\n );\n playButton.after(\n makeButton('10 \u00bb', 'Forward 10 seconds', () => jump(player, STEP))\n );\n\n Object.assign(transport.style, {\n display: 'flex',\n alignItems: 'center',\n gap: '10px',\n });\n\n document.addEventListener('keydown', (e) => {\n if (isEditable(e.target)) return;\n if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n jump(player, e.key === 'ArrowLeft' ? -STEP : STEP);\n }\n });\n\n return true;\n };\n\n if (init()) return;\n\n const observer = new MutationObserver(() => {\n if (init()) observer.disconnect();\n });\n\n observer.observe(document.documentElement, { childList: true, subtree: true });\n})();<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"I used ChatGPT to create this UserScript when someone was asking for a fast-forward and rewind feature in WFMU’s archive player. I have often wanted…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[30,37],"tags":[],"class_list":["post-1851","post","type-post","status-publish","format-standard","hentry","category-participatory-culture","category-scripting-applications","entry"],"_links":{"self":[{"href":"https:\/\/zacharybaiel.com\/blog\/wp-json\/wp\/v2\/posts\/1851","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zacharybaiel.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zacharybaiel.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zacharybaiel.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zacharybaiel.com\/blog\/wp-json\/wp\/v2\/comments?post=1851"}],"version-history":[{"count":3,"href":"https:\/\/zacharybaiel.com\/blog\/wp-json\/wp\/v2\/posts\/1851\/revisions"}],"predecessor-version":[{"id":1858,"href":"https:\/\/zacharybaiel.com\/blog\/wp-json\/wp\/v2\/posts\/1851\/revisions\/1858"}],"wp:attachment":[{"href":"https:\/\/zacharybaiel.com\/blog\/wp-json\/wp\/v2\/media?parent=1851"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zacharybaiel.com\/blog\/wp-json\/wp\/v2\/categories?post=1851"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zacharybaiel.com\/blog\/wp-json\/wp\/v2\/tags?post=1851"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}