Howler audio and playback speed/volume not working on mobile

Question

I'm making a mix board to play songs using react, js, and howler.js. the deployed site works fine (except for a warning about "HTML 5 Audio pool exhausted, returning potentially locked audio object") but none of the features are working on the mobile site

repo: https://github.com/abbeydoyle/20goto10 site: https://20goto10.netlify.app/songs

import React, { useEffect, useState, useCallback } from "react";
import Slider from "@mui/material/Slider";
import Stack from "@mui/material/Stack";
import Divider from "@mui/material/Divider";
import { BsFillVolumeMuteFill, BsFillVolumeUpFill } from "react-icons/bs";
import { AiFillFastBackward, AiFillFastForward } from "react-icons/ai";
import { Howl, Howler } from "howler";

import NobinobiImport from "../assets/audio/Nobinobi.mp3";
import HitomImport from "../assets/audio/Hitomebore.mp3";
import ShitsurImport from "../assets/audio/Shitsuren.mp3";
import KikaiImport from "../assets/audio/Kikai.mp3";
import YoishioImport from "../assets/audio/Yoisho.mp3";
import SutImport from "../assets/audio/Sutageiza.mp3";
import KaikoImport from "../assets/audio/Kaikoshumi.mp3";
import KoukaiInstImport from "../assets/audio/KoukaiInstrumental.mp3";
import UkiyoImport from "../assets/audio/Ukiyo.mp3";
import KyuImport from "../assets/audio/Kyusoku.mp3";
import NozImport from "../assets/audio/Nozomi.mp3";
import KepImport from "../assets/audio/Keppaku.mp3";
import KoukImport from "../assets/audio/Koukai.mp3";
import RyokoImport from "../assets/audio/Ryoko.mp3";

const audioFiles = {
  n: NobinobiImport,
  s: ShitsurImport,
  k: KikaiImport,
  y: YoishioImport,
  g: SutImport,
  a: KaikoImport,
  t: KoukaiInstImport,
  u: UkiyoImport,
  h: HitomImport,
  o: KyuImport,
  z: NozImport,
  p: KepImport,
  i: KoukImport,
  r: RyokoImport,
};
const howlInstances = {};
let currentlyPlaying = null;

Object.keys(audioFiles).forEach((key) => {
  howlInstances[key] = new Howl({
    preload: true,
    autoplay: false,
    html5: true,
    src: [audioFiles[key]],
  });
});

const playAudio = (key) => {
  if (currentlyPlaying) {
    currentlyPlaying.pause();
  }

  howlInstances[key].play();
  currentlyPlaying = howlInstances[key];
};

export default function Songs() {
  useEffect(() => {
    const keysArr = [...document.querySelectorAll(".mixbutton")];

    const getKey = (event) => {
      const parsedKey = event.key.toLowerCase().replace("\", "\\");
      const parsedCode = event.code.toLowerCase();
      const element =
        document.querySelector(`[data-key="${parsedCode}"]`) ||
        document.querySelector(`[data-key="${parsedKey}"]`);
      return element;
    };

    // keyboard events
    const addActiveClassOnKeydown = (event) => {
      const key = getKey(event);
      if (key) {
        key.classList.add("active");
      }
      const parsedKey = event.key.toLowerCase().replace("\", "\\");

      if (parsedKey in audioFiles) {
        playAudio(parsedKey);
      }
      if (parsedKey === "w") {
        Howler.stop();
      }
      if (parsedKey === "v") {
        if (currentlyPlaying && currentlyPlaying.playing()) {
          currentlyPlaying.pause();
        } else if (currentlyPlaying) {
          currentlyPlaying.play();
        }
      }
      if (parsedKey === "x") {
        if (currentlyPlaying && !currentlyPlaying.playing()) {
          setTimeout(() => {
            currentlyPlaying.play();
          }, 500);
        }
      }
    };
    document.addEventListener("keydown", addActiveClassOnKeydown);

    const removeActiveClassOnKeyup = (event) => {
      const key = getKey(event);
      if (key) {
        key.classList.remove("active");
      }
    };
    document.addEventListener("keyup", removeActiveClassOnKeyup);

    // mouseclick events
    const addActiveClassOnMousedown = (event) => {
      if (event.target.dataset.key) {
        event.target.classList.add("active");

        if (event.target.dataset.key in audioFiles) {
          playAudio(event.target.dataset.key);
        }
        if (event.target.dataset.key === "w") {
          Howler.stop();
        }
        if (event.target.dataset.key === "v") {
          if (currentlyPlaying && currentlyPlaying.playing()) {
            currentlyPlaying.pause();
          } else if (currentlyPlaying) {
            currentlyPlaying.play();
          }
        }
        if (event.target.dataset.key === "x") {
          if (currentlyPlaying && !currentlyPlaying.playing()) {
            setTimeout(() => {
              currentlyPlaying.play();
            }, 500);
          }
        }
      }
    };
    document.addEventListener("mousedown", addActiveClassOnMousedown);

    const removeActiveClassOnMouseup = (event) => {
      if (event.target.dataset.key) {
        event.target.classList.remove("active");
      }
    };
    document.addEventListener("mouseup", removeActiveClassOnMouseup);

    // touchstart events
    const addActiveClassOnTouchstart = (event) => {
      if (event.target.dataset.key) {
        event.target.classList.add("active");
      }
    };
    document.addEventListener("mousedown", addActiveClassOnTouchstart);

    const removeActiveClassOnTouchend = (event) => {
      if (event.target.dataset.key) {
        event.target.classList.remove("active");
      }
    };
    document.addEventListener("mouseup", removeActiveClassOnTouchend);

    const animate = (element) => {
      const hueColor = Math.floor(Math.random() * (360 - 0 + 1)) + 0;
      const color = `hsla(${hueColor}, 100%, 50%, 50%)`;
      const textColor = `hsl(${hueColor}, 100%, 50%)`;
      const textShadow = `0 0 0.80em ${color}, 0 0 1.60em ${color}, 0 0 4em ${color}`;
      const boxShadow = `-3px 3px 4px ${color}, 3px -3px 4px ${color}, 3px 3px 4px ${color}, -3px -3px 4px ${color}, 0 0 10px ${color}`;

      const keyIndex = keysArr.indexOf(element);
      const animatedKeysRight = keysArr.slice(keyIndex);
      const animatedKeysLeft = keysArr.slice(0, keyIndex);

      const transitionHandler = (event) => {
        event.target.style.boxShadow = "none";
        event.target.style.color = null;
        event.target.style.textShadow = "none";
        event.target.removeEventListener("transitionend", transitionHandler);
      };

      animatedKeysRight.forEach((keyEl, i) => {
        setTimeout(() => {
          keyEl.addEventListener("transitionend", transitionHandler);
          keyEl.style.boxShadow = boxShadow;
          keyEl.style.color = textColor;
          keyEl.style.textShadow = textShadow;
        }, i * 35);
      });

      animatedKeysLeft.forEach((keyEl, j) => {
        const i = animatedKeysLeft.length - j;
        setTimeout(() => {
          keyEl.addEventListener("transitionend", transitionHandler);
          keyEl.style.boxShadow = boxShadow;
          keyEl.style.color = textColor;
          keyEl.style.textShadow = textShadow;
        }, i * 35);
      });
    };

    document.addEventListener("keydown", (event) => {
      const key = getKey(event);

      if (key) {
        animate(key);
      }
    });

    document.addEventListener("click", (event) => {
      if (event.target.dataset.key) {
        animate(event.target);
      }
    });

    window.addEventListener("load", () => {
      const key = document.querySelector(`[data-key="enter"]`);
      animate(key);
    });

    return () => {
      // cleanup
      document.removeEventListener("keydown", addActiveClassOnKeydown);
      document.removeEventListener("keyup", removeActiveClassOnKeyup);
      document.removeEventListener("mousedown", addActiveClassOnMousedown);
      document.removeEventListener("mouseup", removeActiveClassOnMouseup);
      document.removeEventListener("touchstart", addActiveClassOnTouchstart);
      document.removeEventListener("touchend", removeActiveClassOnTouchend);
    };
  }, []);

  const [hasAlertBeenShown, setHasAlertBeenShown] = useState(false);
  const showAlertAndRemoveListener = useCallback(
    (event) => {
      // If the alert has already been shown, return early
      if (hasAlertBeenShown) {
        return;
      }
      // Stop the Howler
      Howler.stop();
      // Display the alert
      alert(
        "🔊 Clicking the soundboard or using the corresponding keys will play music and display mild lights. Please prepare the appropriate accommodations if necessary 🔊"
      );

      // Set the flag to true
      setHasAlertBeenShown(true);

      // Remove the event listener
      document.removeEventListener("click", showAlertAndRemoveListener);
    },
    [hasAlertBeenShown, setHasAlertBeenShown]
  );

  useEffect(() => {
    // Add the event listener
    document.addEventListener("click", showAlertAndRemoveListener, {
      capture: true,
      once: true,
    });

    // Cleanup function to remove the event listener when the component unmounts
    return () => {
      document.removeEventListener("click", showAlertAndRemoveListener);
    };
  }, [showAlertAndRemoveListener]);

  const [value, setValue] = useState([]);
  const handleChange = (event, newValue) => {
    setValue(newValue);
    Howler.volume(value * 0.01);
  };
  function valuetext(value) {
    return `${value}%`;
  }
  const [playbackRate, setPlaybackRate] = useState(1);
  const handlePlaybackRateChange = (event, newRate) => {
    setPlaybackRate(newRate);
    if (currentlyPlaying) {
      currentlyPlaying.rate(newRate);
    }
  };

  function playbackRateText(value) {
    return `${value}x`;
  }

  return (
    <>
              {`/* My Music */`}
      
      
        
          
            
              
                mixboard v20goto10
              
              }
              >
                
                  
                  
                  
                
                
                  
                  
                  
                
              
              }
              >
                
                  stop
                  w
                
                
                  pause
                  v
                
                
                  play
                  x
                
              
            
            
              
                Nobinobi 
 伸び伸び
                n
              
              
                Shitsuren 
 失恋
                s
              
              
                Kikai 
 機械
                k
              
              
                Keppaku 
 潔白
                p
              
              
                Yoisho 
 よいしょ
                y
              
              
                Sutageiza 
 スターゲイザー
                g
              
              
                Kaikoshumi 
 懐古趣味
                a
              
              
                Koukai 
 後悔
                i
              
              
                Koukai 
 Instrumental 

                後悔
                t
              
              
                Ukiyo 
 浮世
                u
              
              
                Hitomebore 
 目惚れ
                h
              
              
                Ryoko 
 旅行
                r
              
              
                Kyusoku 
 休息
                o
              
              
                Nozomi 
 希
                z
              
              
                Unreleased 
 未発表
                e
              
              
                Unreleased 
 未発表
                d
              
            
          
        
        
          10PRINTTUNES
          
          
            1. Nozomi 希 | Hope
            2. Kyusoku 休息 | Rest
            3. Ryoko 旅行 | Trip
            4. Hitomebore 目惚れ | Admiration
            5. Ukiyo 浮世 | World
            6. Koukai 後悔 | Regret
            7. Koukai Instrumental 後悔 | Regret
            8. Kaikoshumi 懐古趣味 | Nostalgia
            9. Yoisho よいしょ | Good Day
            10. Sutageiza スターゲイザー | Stargazer
            11. Keppaku 潔白 | Innocence
            12. Kikai 機械 | Chance
            13. Shitsuren 失恋 | Broken Heart
            14. Nobinobi 伸び伸び | Carefree
          
        
      
      
        10PRINTTUNES
        
        
          1. Nozomi 希 | Hope
          2. Kyusoku 休息 | Rest
          3. Ryoko 旅行 | Trip
          4. Hitomebore 目惚れ | Admiration
          5. Ukiyo 浮世 | World
          6. Koukai 後悔 | Regret
          7. Koukai Instrumental 後悔 | Regret
          8. Kaikoshumi 懐古趣味 | Nostalgia
          9. Yoisho よいしょ | Good Day
          10. Sutageiza スターゲイザー | Stargazer
          11. Keppaku 潔白 | Innocence
          12. Kikai 機械 | Chance
          13. Shitsuren 失恋 | Broken Heart
          14. Nobinobi 伸び伸び | Carefree
        
      
    
  );
}

I think it maybe has something to do with the recursive song mapping?

Howler audio and playback speed/volume not working on mobile

Answers (0)

Related Questions