drags-and-nerds/v1-com-officielle/src/titleComponents/MusicPlayer.vue

<script setup>
  import PlayIcon from '../assets/icons/play.svg'
  import PauseIcon from '../assets/icons/pause.svg'
  import NextIcon from '../assets/icons/next.svg'
  import PrevIcon from '../assets/icons/prev.svg'
  import { loadAudioData } from '@/data/audioData.js'
</script>

<template>
    <div id="playerContainer">
      <div id="playerCreditStyle">
        <p>{{audioCredits}}</p>
      </div>
      <button type="button" class="iconBtnStyle" @click="prevTrack" data-tooltip="précédente">
        <PrevIcon name="prev" class="icon"/>
      </button>
      <button type="button" class="iconBtnStyle" @click="toggleAudio" data-tooltip="lancer">
        <component :is="isPlaying? PauseIcon : PlayIcon" class="icon"/>
      </button>
      <button type="button" class="iconBtnStyle" @click="nextTrack" data-tooltip="suivante">
        <NextIcon name="next" class="icon"/>
      </button>
    </div>
    <audio ref="selectedAudio" @ended="nextTrack">
      <source :src="audioFile" type="audio/mpeg">
    </audio>
</template>

<style scoped>
  /*================= Mise en page:
    => Mobile First : par défaut, moins de 500px
    => Tablette et PC format haut : de 500 à 1000px
    => PC large : à partir de 1000px
  */

  /*+++++++++++++++++ COPYBOX
      ================ PC HAUT/IPAD
      @media(min-width:500px){}
      ================ PC LARGE
      @media(min-width:1000px){}
  */

  #playerContainer{
    width:100%;
    position:absolute;
    top:0;
    left:0;
    height:7.77%;
    background-color: transparent;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding-top: 13.12px;
  }

  #playerContainer .iconBtnStyle{
    width: 33px;
    height: 33px;
    margin-left: 16.1px;
  }

  #playerContainer .iconBtnStyle .icon{
    pointer-events: none;
    cursor: inherit;
  }

  #playerCreditStyle{
    width: 50%;
    height: 50px;
    background-color: var(--back-color);
    color: var(--main-color);
    display: flex;
    align-items: center;
    margin-left: 16.1px;
    padding-left: 16.1px;
    border-radius: 66px;
    border-style: solid;
    border-color: var(--main-color);
    border-width: thin;
    font-family: 'velvelyne';
    font-size: 16.1px;
    font-weight: bold;
    white-space: pre;
    line-height: 1.0em;
  }




  /*================ PC LARGE*/
  @media(min-width:1300px){
    #playerContainer{
      height: 7.77%;
      padding: 16.1px;
    }

    #playerCreditStyle{
      margin-left: 33px;
      width: 33.3%;
      white-space: inherit;
    }
  }
</style>

<script>
  export default {
    name : 'MusicPlayer',
    data(){
      return{
        audioData: [],
        selectedSong:{
          track: "",
          artist: "",
          src: ""
        },
        audioFile:"",
        audioCredits:"",
        trackCount: 0,
        target: null,
        isPlaying: false
      }
    },
    methods:{
      loadAudio(){
        //console.log(this.target);
        this.target.pause();
        this.selectedSong = this.audioData[this.trackCount];
        this.audioFile = this.selectedSong.src;
        this.audioCredits = ' ' + this.selectedSong.track +' - \n         '+ this.selectedSong.artist;
        this.target.volume = 1;
        this.target.load();
        if(this.isPlaying){
          this.target.play();
        }
      },
      toggleAudio(){
        if(this.isPlaying){
        this.target.pause();
        }else{
          this.target.play();
        }
        this.isPlaying = !this.isPlaying;
      },
      prevTrack(){
        this.trackCount -= 1;
        if (this.trackCount<0){
          this.trackCount = this.audioData.length - 1;
        }
        //console.log('prev:', this.trackCount);
        this.loadAudio();
      },
      nextTrack(){
        this.trackCount += 1;
        if (this.trackCount>=this.audioData.length){
          this.trackCount = 0;
        }
        //console.log('next:', this.trackCount);
        this.loadAudio();
      }
    },
    async mounted(){
      this.audioData = await loadAudioData();
      this.target = this.$refs.selectedAudio;
      //console.log('AUDIO/', this.audioData);
      this.loadAudio();
      console.log("Music player is loaded!");
    }
  };
</script>