javascript design pattern study [closed]

Design for a Music Streaming Service

Use the Strategy pattern to handle various music formats, such as Mp3 and Wav. Implement the Observer pattern to monitor the music playback status. Define a Subject interface to update the Ui whenever there are any changes. Apply the Factory pattern to create objects required for music playback. For example, when playing Mp3 format music, create an Mp3 Decoder object, and for Wav format music, create a WavDecoder object. Utilize the Composite pattern to structure music playlists. Use the Facade pattern to determine whether the user is a member or not.

I'm not sure if this design I came up with is accurate. I'm a beginner and currently studying, but I don't know the proper usage of design patterns or the correct order to apply them. Could you show me a simple UML diagram or help me improve the part I designed? Also, please guide me on the appropriate sequence for using design patterns.

I felt like I used multiple patterns, but I had the sense of designing in order to use design patterns, and I'm not sure about the design for the music streaming service

// Song.js
class Song {
    constructor(title, artist, format) {
      this.title = title;
      this.artist = artist;
      this.format = format;
    }
  }
  
  // Decoder.js (Strategy Pattern)
  class Decoder {
    decode(format) {
      return `Decoding ${format} format...`;
    }
  }
  
  class Mp3Decoder extends Decoder {
    decode(format) {
      return `Decoding MP3 format: ${format}...`;
    }
  }
  
  class WavDecoder extends Decoder {
    decode(format) {
      return `Decoding WAV format: ${format}...`;
    }
  }
  
  // MusicPlayer.js (Observer Pattern - Subject)
class MusicPlayer {
    constructor() {
      this.observers = [];
    }
  
    play(song) {
      const message = `Playing song: ${song.title} - ${song.artist}`;
      this.notifyObservers();
      return message;
    }
  
    registerObserver(observer) {
      this.observers.push(observer);
    }
  
    removeObserver(observer) {
      const index = this.observers.indexOf(observer);
      if (index !== -1) {
        this.observers.splice(index, 1);
      }
    }
  
    notifyObservers() {
      this.observers.forEach((observer) => console.log(observer.update()));
    }
  }
  
  
  // Observer.js (Observer Pattern)
  class Observer {
    constructor() {
      this.subject = null;
    }
  
    setSubject(subject) {
      this.subject = subject;
      this.subject.registerObserver(this);
    }
  
    update() {
      // UI update logic when music playback changes
      return "Updating UI...";
    }
  }
  
  // DecoderFactory.js (Factory Pattern)
  class DecoderFactory {
    createDecoder(format) {
      switch (format) {
        case "MP3":
          return new Mp3Decoder();
        case "WAV":
          return new WavDecoder();
        default:
          throw new Error(`Decoder not available for format: ${format}`);
      }
    }
  }
  
  // Playlist.js (Composite Pattern)
  class Playlist {
    constructor(name) {
      this.name = name;
      this.songs = [];
    }
  
    addSong(song) {
      this.songs.push(song);
    }
  
    removeSong(song) {
      const index = this.songs.findIndex(
        (s) => s.title === song.title && s.artist === song.artist
      );
      if (index !== -1) {
        this.songs.splice(index, 1);
      }
    }
  }
  
  // MusicFacade.js (Facade Pattern)
class MusicFacade {
    constructor() {
      this.streamingService = {
        subscribed: false,
      };
      this.musicPlayer = new MusicPlayer();
      this.decoderFactory = new DecoderFactory();
      this.playlists = [];
    }
  
    subscribe() {
  
      this.streamingService.subscribed = true;
      return "Subscribed to the music streaming service.";
    }
  
    unsubscribe() {
      this.streamingService.subscribed = false;
      return "Unsubscribed from the music streaming service.";
    }
  
    playMusic(song) {
      if (this.streamingService.subscribed) {
        const decoder = this.decoderFactory.createDecoder(song.format);
        const decodeMessage = decoder.decode(song.format);
        const playMessage = this.musicPlayer.play(song);
        return `${decodeMessage}\n${playMessage}`;
      } else {
        return "You need to subscribe to the music streaming service to play music.";
      }
    }
  
    createPlaylist(name) {
      const playlist = new Playlist(name);
      this.playlists.push(playlist);
      return `Created playlist: ${name}`;
    }
  
    addSongToPlaylist(song, playlistName) {
      const playlist = this.playlists.find((p) => p.name === playlistName);
      if (playlist) {
        playlist.addSong(song);
        return `Added song to playlist: ${playlistName}`;
      } else {
        return `Playlist not found: ${playlistName}`;
      }
    }
  
    removeSongFromPlaylist(song, playlistName) {
      const playlist = this.playlists.find((p) => p.name === playlistName);
      if (playlist) {
        playlist.removeSong(song);
        return `Removed song from playlist: ${playlistName}`;
      } else {
        return `Playlist not found: ${playlistName}`;
      }
    }
  }
  
  // Usage
  const musicFacade = new MusicFacade();
  console.log(musicFacade.subscribe());
  
  const observer = new Observer();
  const song = new Song("Song Title", "Artist", "MP3");
  observer.setSubject(musicFacade.musicPlayer);
  musicFacade.musicPlayer.registerObserver(observer);
  
  console.log(musicFacade.playMusic(song));
  console.log(musicFacade.createPlaylist("My Playlist"));
  console.log(musicFacade.addSongToPlaylist(song, "My Playlist"));
  console.log(musicFacade.removeSongFromPlaylist(song, "My Playlist"));
  console.log(musicFacade.unsubscribe());