Update p5.sound toggle behaviour

Author: davepagurek

client/modules/IDE/components/Preferences/index.jsx

@@ -578,17 +578,7 @@ export default function Preferences() {
                   <input
                     type="radio"
                     onChange={() => {
-                      if (versionInfo.lastP5SoundURL) {
-                        // If the sketch previously used a nonstandard p5.sound
-                        // URL, restore that URL
-                        updateHTML(
-                          versionInfo.setP5SoundURL(versionInfo.lastP5SoundURL)
-                        );
-                        versionInfo.setLastP5SoundURL(undefined);
-                      } else {
-                        // Otherwise, turn on the default p5.sound URL
-                        updateHTML(versionInfo.setP5Sound(true));
-                      }
+                      updateHTML(versionInfo.setP5Sound(true));
                     }}
                     aria-label={`${t('Preferences.SoundAddon')} ${t(
                       'Preferences.AddonOn'
@@ -605,12 +595,6 @@ export default function Preferences() {
                   <input
                     type="radio"
                     onChange={() => {
-                      // If the previous p5.sound.js script tag is not the
-                      // default version that one will get via this toggle,
-                      // record it so we can give the option to put it back
-                      if (versionInfo.p5SoundURL !== p5SoundURL) {
-                        versionInfo.setLastP5SoundURL(versionInfo.p5SoundURL);
-                      }
                       updateHTML(versionInfo.setP5Sound(false));
                     }}
                     aria-label={`${t('Preferences.SoundAddon')} ${t(
@@ -628,11 +612,20 @@ export default function Preferences() {
                   >
                     {t('Preferences.Off')}
                   </label>
-                  {versionInfo.lastP5SoundURL && (
-                    <legend className="preference__warning">
-                      {t('Preferences.UndoSoundVersion')}
-                    </legend>
-                  )}
+                  <legend className="preference__warning">
+                    <a
+                      target="_blank"
+                      rel="noreferrer"
+                      href={`https://${
+                        versionInfo.isVersion2 ? 'beta.' : ''
+                      }p5js.org/reference/p5.sound`}
+                    >
+                      {t('Preferences.SoundReference').replace(
+                        '$VERSION',
+                        versionInfo.version
+                      )}
+                    </a>
+                  </legend>
                 </fieldset>
               </div>
               <div className="preference">

client/modules/IDE/hooks/useP5Version.jsx

@@ -144,7 +144,12 @@ export const p5Versions = [
 
 export const currentP5Version = '1.11.5'; // Don't update to 2.x until 2026
 
-export const p5SoundURLOld = `https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/addons/p5.sound.min.js`;
+export const p5SoundURLOldTemplate =
+  'https://cdnjs.cloudflare.com/ajax/libs/p5.js/$VERSION/addons/p5.sound.min.js';
+export const p5SoundURLOld = p5SoundURLOldTemplate.replace(
+  '$VERSION',
+  '1.11.3'
+);
 export const p5SoundURL =
   'https://cdn.jsdelivr.net/npm/p5.sound@0.2.0/dist/p5.sound.min.js';
 export const p5PreloadAddonURL =
@@ -168,8 +173,6 @@ export function P5VersionProvider(props) {
   const indexSrc = indexFile?.content;
   const indexID = indexFile?.id;
 
-  const [lastP5SoundURL, setLastP5SoundURL] = useState(undefined);
-
   // { version: string, minified: boolean, replaceVersion: (version: string) => string } | null
   const versionInfo = useMemo(() => {
     if (!indexSrc) return null;
@@ -207,14 +210,6 @@ export function P5VersionProvider(props) {
     // We only know for certain which one we've got if
     if (usedP5Versions.length === 1) {
       const { version, minified, scriptNode } = usedP5Versions[0];
-      const replaceVersion = function (newVersion) {
-        const file = minified ? 'p5.min.js' : 'p5.js';
-        scriptNode.setAttribute(
-          'src',
-          `https://cdn.jsdelivr.net/npm/p5@${newVersion}/lib/${file}`
-        );
-        return serializeResult();
-      };
 
       const p5SoundNode = [
         ...dom.documentElement.querySelectorAll('script')
@@ -232,7 +227,9 @@ export function P5VersionProvider(props) {
           const newNode = document.createElement('script');
           newNode.setAttribute(
             'src',
-            version.startsWith('2') ? p5SoundURL : p5SoundURLOld
+            version.startsWith('2')
+              ? p5SoundURL
+              : p5SoundURLOldTemplate.replace('$VERSION', version)
           );
           scriptNode.parentNode.insertBefore(newNode, scriptNode.nextSibling);
         }
@@ -250,6 +247,31 @@ export function P5VersionProvider(props) {
         return serializeResult();
       };
 
+      const replaceVersion = function (newVersion) {
+        const file = minified ? 'p5.min.js' : 'p5.js';
+        scriptNode.setAttribute(
+          'src',
+          `https://cdn.jsdelivr.net/npm/p5@${newVersion}/lib/${file}`
+        );
+
+        if (p5SoundNode) {
+          if (version.startsWith('2.') !== newVersion.startsWith('2.')) {
+            // Turn off p5.sound if the user switched from 1.x to 2.x
+            setP5Sound(false);
+          } else {
+            // Replace the existing p5.sound with the one compatible with
+            // the new version
+            setP5SoundURL(
+              version.startsWith('2.')
+                ? p5SoundURL
+                : p5SoundURLOldTemplate.replace('$VERSION', newVersion)
+            );
+          }
+        }
+
+        return serializeResult();
+      };
+
       const p5PreloadAddonNode = [
         ...dom.documentElement.querySelectorAll('script')
       ].find((s) => s.getAttribute('src') === p5PreloadAddonURL);
@@ -294,14 +316,13 @@ export function P5VersionProvider(props) {
 
       return {
         version,
+        isVersion2: version.startsWith('2.'),
         minified,
         replaceVersion,
         p5Sound: !!p5SoundNode,
         setP5Sound,
         setP5SoundURL,
         p5SoundURL: p5SoundNode?.getAttribute('src'),
-        lastP5SoundURL,
-        setLastP5SoundURL,
         p5PreloadAddon: !!p5PreloadAddonNode,
         setP5PreloadAddon,
         p5ShapesAddon: !!p5ShapesAddonNode,

client/styles/components/_preferences.scss

@@ -150,8 +150,12 @@
 .preference__warning {
   @include themify() {
     display: contents;
-    font-weight: bold;
-    color: getThemifyVariable("preferences-warning-color");
+    & a {
+      color: getThemifyVariable('button-background-hover-color');
+    }
+    & a:hover {
+      text-decoration: underline;
+    }
   }
 }
 

translations/locales/en-US/translations.json

@@ -228,7 +228,7 @@
     "DataAddon": "p5.js 1.x Compatibility Add-on Library — Data Structures",
     "AddonOnARIA": "on",
     "AddonOffARIA": "off",
-    "UndoSoundVersion": "Want to use p5.sound.js again? Turning it back on will restore the version you were using before.",
+    "SoundReference": "View the reference for p5.sound compatible with p5.js $VERSION",
     "CopyToClipboardSuccess": "Copied to clipboard!",
     "CopyToClipboardFailure": "We weren't able to copy the text, try selecting it and copying it manually."
   },