Fixed issue with web audio API that allowed only one play and stop. Actually the audioContext object is recreated and re-connected now. Some JSHint fixes also came through (sorry about that)

I'm getting a window is not defined when calling: const audio = Audio({ file:myAudioFile, volume: 1, });

Running in Next.JS environment. Has anyone seen this before?

Scenario: I want to create a game capable of playing the same sound multiple times and possibily at the same time.

It would be good if I had a SoundBuffer fetching the data into memory and then a separate Audio class, which can be used to play that SoundBuffer without having to re-download for every new Audio instance.

In contradiction with what is stated, AudioContext is NOT supported by FF 23, nor 24. It's only available in the nightlies ATM. It's set to ship with FF 25.

https://developer.mozilla.org/en-US/docs/Web/API/AudioContext#Browser_compatibility

I really like the playlist feature of this library, but I would like to be able to get and update the current time position of the audio being played. This would allow React implementations to display the current play time and also allow users to scrub through audio files.

This feature could be implemented directly or you could give developers the ability to implement this functionality by exposing the audio context (https://github.com/EvandroLG/ts-audio/issues/41)

Helpful links:

• https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode/start
• https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext/currentTime

It appears there's a missing logic path for creating an audioJS object and delaying the playback. shouldPlay gets set to true, but nothing happens after that.

Yo Evandro! I've made a logo for this project, check it out:

| | README.md | | --- | --- |

Let me know what you think of it! Note that it supports both light and dark themes, as well as the reduced motion preference.

It seems none of your dependencies are used. They are installed without being needed when you install ts-audio. I noticed because playlist > glob > minimatch has a high vulnerability (npm audit).

Could you remove all of the unused dependencies?

Per the AudioContext() docs, Safari requires a vendor prefix.

AudioContext() does not work on Safari (checked with v13.1), so a fallback was added to webkitAudioContext().

I use this code on firefox.

https://github.com/junhuanchen/webduino-module-azrue-speech/blob/79629695d6a87efba81287f566c0ce375ec09aff/audioJS.js#L150

https://github.com/junhuanchen/webduino-module-azrue-speech/blob/79629695d6a87efba81287f566c0ce375ec09aff/audioJS.js#L114

https://github.com/junhuanchen/webduino-module-azrue-speech/blob/79629695d6a87efba81287f566c0ce375ec09aff/audioJS.js#L99-L100

maybe need fix this.source.gain func.

User can now select to loop the selected audio, and/or change the volume.

These functionalities are quite important especially for use in HTML5 Gaming audio procedures.

User can now set loop and volume parameters or they default to false and 1 (highest volume)

Hi there! Love this library, you have done a fantastic job. I am making a simple audio player, and wrote up the following code below - however, the playlist does not automatically move onto the next song in the list after the current one finishes. I've tried setting loop to true, enabling shuffle, and playlist.end doesn't seem to work.

Here is the code below, is there something I'm missing? Using 0.7.0, latest release.

import { useState, useMemo, useEffect, useRef } from "react";
import {
  IoMdPlay,
  IoMdPause,
  IoMdSkipForward,
  IoMdSkipBackward,
  IoMdMusicalNote,
  IoMdMusicalNotes,
} from "react-icons/io";
import { AudioPlaylist } from "ts-audio";
import FatsNY from "../assets/mp3/FatsNY.mp3";
import PictureBall from "../assets/mp3/PictureBall.mp3";
import Silvery from "../assets/mp3/Silvery.mp3";
import SecretGarden from "../assets/mp3/SecretGarden.mp3";

export default function MusicPlayer(props: any) {
  const [currentSong, setCurrentSong] = useState(0);
  const [isPlaying, setIsPlaying] = useState(false);

  interface Song {
    title: string;
    artist: string;
    img_src: any;
    src: string;
  }

  const songs: Song[] = useMemo(
    () => [
      {
        title: "At the Moving Picture Ball",
        artist: "Maurice Burkhart",
        img_src: IoMdMusicalNote,
        src: PictureBall,
      },
      {
        title: "New York Yacht Club",
        artist: "Fats Waller",
        img_src: IoMdMusicalNote,
        src: FatsNY,
      },
      {
        title: "By the Lights of the Silvery",
        artist: "Fats Waller",
        img_src: IoMdMusicalNotes,
        src: Silvery,
      },
      {
        title: "Secret Garden",
        artist: "Unknown",
        img_src: IoMdMusicalNote,
        src: SecretGarden,
      },
    ],
    []
  );

  const playlist = useMemo(() => {
    return AudioPlaylist({
      files: songs.map((song: Song) => song.src),
      loop: false,
    });
  }, [songs]);

  playlist.on("start", (param) => {
    // doesn't seem to have any data in the param
    console.log(param);
  });

  playlist.on("end", (param) => {
    // doesn't seem to work
  });

  const handlePlay = () => {
    playlist.play();
    setIsPlaying(true);
  };

  const handlePause = () => {
    playlist.pause();
    setIsPlaying(false);
  };

  const handleSkip = () => {
    playlist.pause();
    playlist.next();
    setIsPlaying(true);

    setCurrentSong(
      (currentSong) => (currentSong + 1 + songs.length) % songs.length
    );
  };

  const handlePrevious = () => {
    playlist.pause();
    playlist.prev();
    setIsPlaying(true);
    setCurrentSong(
      (currentSong) => (currentSong - 1 + songs.length) % songs.length
    );
  };

  return (
    <div
      style={{
        backgroundColor: "gray",
        display: "flex",
        justifyContent: "space-between",
        paddingLeft: 20,
        paddingTop: 8,
      }}
    >
      <div>
        <h3>Now Playing</h3>
        <p>
          {songs[currentSong].title} by {songs[currentSong].artist}
        </p>
      </div>

      <div>
        <IoMdSkipBackward
          style={{ cursor: "pointer", margin: 12 }}
          onClick={handlePrevious}
        />
        {isPlaying ? (
          <IoMdPause
            style={{ cursor: "pointer", margin: 12 }}
            onClick={() => (!isPlaying ? handlePlay() : handlePause())}
          />
        ) : (
          <IoMdPlay
            style={{ cursor: "pointer", margin: 12 }}
            onClick={() => (!isPlaying ? handlePlay() : handlePause())}
          />
        )}
        <IoMdSkipForward
          style={{ cursor: "pointer", margin: 12 }}
          onClick={handleSkip}
        />
      </div>
    </div>
  );
}