edit: interactivité du player + import depuis json

v1-com-officielle/public/DATA/audioData.json

@@ -0,0 +1,17 @@
+[
+  {
+    "track":"L'Inverse",
+    "artist":"Surprise",
+    "src":"./DATA/Son/1.mp3"
+  },
+  {
+    "track":"Yummy",
+    "artist":"Ayesha Erotica",
+    "src":"./DATA/Son/2.mp3"
+  },
+  {
+    "track":"M le Maudit",
+    "artist":"Mauvais Exemple",
+    "src":"./DATA/Son/3.mp3"
+  }
+]

v1-com-officielle/src/data/audioData.js

@@ -0,0 +1,4 @@
+export async function loadAudioData() {
+  const aData = await fetch('/DATA/audioData.json');
+  return await aData.json();
+}

v1-com-officielle/src/titleComponents/MusicPlayer.vue

@@ -1,22 +1,26 @@
 <script setup>
   import CloseIcon from '../assets/icons/close.svg'
+  import { loadAudioData } from '@/data/audioData.js'
 </script>
 
 <template>
     <div id="playerContainer">
       <div id="playerCreditStyle">
-        <p>Test-333</p>
+        <p>{{audioCredits}}</p>
       </div>
-      <button type="button" class="iconBtnStyle">
+      <button type="button" class="iconBtnStyle" @click="prevTrack">
-        <CloseIcon name="test" class="icon"/>
+        <CloseIcon name="prev" class="icon"/>
       </button>
-      <button type="button" class="iconBtnStyle">
+      <button type="button" class="iconBtnStyle" @click="toggleAudio">
-        <CloseIcon name="test" class="icon"/>
+        <CloseIcon name="toggle" class="icon"/>
       </button>
-      <button type="button" class="iconBtnStyle">
+      <button type="button" class="iconBtnStyle" @click="nextTrack">
-        <CloseIcon name="test" class="icon"/>
+        <CloseIcon name="next" class="icon"/>
       </button>
     </div>
+    <audio ref="selectedAudio" @ended="nextTrack">
+      <source :src="audioFile" type="audio/mpeg">
+    </audio>
 </template>
 
 <style scoped>
@@ -89,7 +93,63 @@
 <script>
   export default {
     name : 'MusicPlayer',
-    mounted(){
+    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.artist +'-'+ this.selectedSong.track;
+        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;
+      this.loadAudio();
       console.log("Music player is loaded!");
     }
   };