Initial commit

components/experiments/statemanagement/NavigatorPlayHandler.vue

@@ -0,0 +1,56 @@
+<template>
+  <h1>hell yeah</h1>
+  <div @click="newDummyAudio"> NEW AUDIO</div>
+  <div @click="showArtWork">SHOW ARTWORK</div>
+  <div @click="play">PLAY</div>
+</template>
+
+<script  lang="ts" setup>
+import { watch, onMounted } from 'vue'
+import { useAudioStore, ensureAudio } from '~/stores/audio'
+
+const createAudioTag = () => {
+  const newDummyAudio = new Audio('data:audio/mp3;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU2LjM2LjEwMAAAAAAAAAAAAAAA//OEAAAAAAAAAAAAAAAAAAAAAAAASW5mbwAAAA8AAAAEAAABIADAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV6urq6urq6urq6urq6urq6urq6urq6urq6v////////////////////////////////8AAAAATGF2YzU2LjQxAAAAAAAAAAAAAAAAJAAAAAAAAAAAASDs90hvAAAAAAAAAAAAAAAAAAAA//MUZAAAAAGkAAAAAAAAA0gAAAAATEFN//MUZAMAAAGkAAAAAAAAA0gAAAAARTMu//MUZAYAAAGkAAAAAAAAA0gAAAAAOTku//MUZAkAAAGkAAAAAAAAA0gAAAAANVVV')
+  newDummyAudio.loop = true
+  newDummyAudio.controls = true
+  newDummyAudio.muted = true
+  newDummyAudio.play()
+}
+
+const play = (state) => {
+  const audio = newDummyAudio()
+  if (state) {
+    audio.play().catch(() => {})
+  }
+}
+
+const showArtWork = () => {
+  const pathKlein = window.location.origin + '/images/scenery/noise_artwork_1024.jpg'
+  const pathGross = window.location.origin + '/images/scenery/noise_artwork_512.jpg'
+  navigator.mediaSession.metadata = null
+  navigator.mediaSession.metadata = new MediaMetadata({
+    title: 'Calm Speech Blocker',
+    artist: 'mindboost',
+    album: 'get your focus',
+    artwork: [
+      { src: pathKlein, sizes: '1024x1024', type: 'image/jpeg' },
+      { src: pathGross, sizes: '512x512', type: 'image/jpeg' }
+    ]
+  })
+}
+
+watch(
+  () => useAudioStore().getPlaying,
+  (newVal) => {
+  },
+  { immediate: true }
+)
+
+// Media Session Setup separat
+onMounted(async () => {
+  const playState = useAudioStore().getPlaying
+  await ensureAudio
+  createAudioTag()
+  showArtWork()
+})
+</script>

components/experiments/statemanagement/PlayButton.vue

@@ -0,0 +1,62 @@
+<template>
+  <li class="nav__item">
+    <a
+      id="focused-icon"
+      class="nav__item-link"
+      href="#"
+      @click.prevent="togglePlaying"
+      @touchstart.prevent="togglePlaying"
+    >
+      <svg v-if="!playing" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <!-- ▶️ PLAY ICON -->
+        <path
+          d="m6.192 3.67 13.568 7.633a.8.8 0 0 1 0 1.394L6.192 20.33A.8.8 0 0 1 5 19.632V4.368a.8.8 0 0 1 1.192-.698Z"
+          fill="currentColor"
+        />
+      </svg>
+
+      <svg v-else width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <!-- ⏸️ PAUSE ICON -->
+        <g clip-path="url(#a)">
+          <path
+            d="M17.083 19.917a2.326 2.326 0 0 1-1.706-.71 2.332 2.332 0 0 1-.71-1.707V5.417c0-.665.236-1.234.71-1.706A2.333 2.333 0 0 1 17.083 3c.664 0 1.233.236 1.708.71.474.475.71 1.044.709 1.707V17.5a2.33 2.33 0 0 1-.71 1.707 2.322 2.322 0 0 1-1.707.71Zm-9.666 0a2.326 2.326 0 0 1-1.707-.71A2.332 2.332 0 0 1 5 17.5V5.417c0-.665.237-1.234.71-1.706A2.333 2.333 0 0 1 7.417 3c.663 0 1.233.236 1.707.71.475.475.71 1.044.71 1.707V17.5a2.33 2.33 0 0 1-.71 1.707 2.322 2.322 0 0 1-1.707.71Z"
+            fill="#e9c046"
+          />
+        </g>
+        <defs>
+          <clipPath id="a">
+            <path fill="#e9c046" d="M0 0h24v24H0z" />
+          </clipPath>
+        </defs>
+      </svg>
+    </a>
+  </li>
+</template>
+<script>
+import { mapState, mapActions } from 'pinia'
+import { useAudioStore } from '~/stores/audio'
+
+export default defineNuxtComponent({
+  name: 'PlayButton',
+
+  created () {
+    this.audioStore = useAudioStore()
+  },
+
+  computed: {
+    ...mapState(useAudioStore, ['playing'])
+  },
+
+  watch: {
+    playing (newValue) {
+      this.$logger.log('Global playing state changed', newValue)
+    }
+  },
+
+  methods: {
+    togglePlaying () {
+      this.audioStore.setPlaying(!this.audioStore.playing)
+    }
+  }
+})
+</script>

components/experiments/statemanagement/StateBar.vue

@@ -0,0 +1,154 @@
+<template>
+  <AudioReactiveBar />
+  <h3>Playing :{{ playing }}</h3>
+  <h3>Number of AudioTags {{ numberOfAudioTags }}</h3>
+  <p>Infos: {{ errorMessage }}</p>
+  <p>AudioContext State: {{ updateCtx }}</p>
+  <li v-for="(audio, index) in audioTags" :key="index">
+    Tag {{ index + 1 }}: <span v-if="checkAudioElementPlaying(audio)">Playing</span><span v-else>Not Playing</span>
+  </li>
+</template>
+
+<script lang="ts">
+import { ref, watch, onMounted } from 'vue'
+import { useAudioStore } from '~/stores/audio'
+import AudioReactiveBar from '~/components/AudioReactiveBar.vue'
+
+export default {
+  name: 'StateBar',
+  components: { AudioReactiveBar },
+  setup () {
+    const audioStore = useAudioStore()
+    const playing = ref(useAudioStore().playing)
+    const audioTags = ref(Array.from(document.querySelectorAll('audio')))
+    const numberOfAudioTags = ref(audioTags.value.length)
+    const errorMessage = ref('')
+    const updateCtx = ref(audioStore.audioContext)
+
+    watch(() => audioStore.playing, (newValue) => {
+      playing.value = newValue
+      // Run the function to log the status of audio elements
+      checkAudioElementsStatus()
+    })
+    watch(() => numberOfAudioTags, (_newValue) => {
+      // useNuxtApp().$logger.log('new AudioTag Amount' + newValue)
+      // Run the function to log the status of audio elements
+      checkAudioElementsStatus()
+    })
+
+    const checkAudioElementPlaying = (audioElement:HTMLAudioElement) => {
+      const isPlaying = !audioElement.paused && audioElement.currentTime > 0 && !audioElement.ended
+      // useNuxtApp().$logger.log(`Audio Element ${audioElement.src}: ${isPlaying ? 'Playing' : 'Not Playing'}`)
+      errorMessage.value = `Audio Element ${audioElement.src}: ${isPlaying ? 'Playing' : 'Not Playing'}`
+      return isPlaying
+    }
+
+    const monitor = () => {
+      // This could be an interval or a direct method call in your gain changing methods
+      setInterval(() => {
+        const audioElements = document.querySelectorAll('audio')
+        errorMessage.value = ''
+        let currentTime, paused, ended
+        audioElements.forEach((element) => {
+          currentTime = element.currentTime
+          paused = element.paused
+          ended = element.ended
+          errorMessage.value += (`  Audio Element ${element.src}: time ${currentTime},paused ${paused}, ended ${ended} _______________`)
+        })
+      }, 100) // Update every 100 ms, adjust interval as necessary
+    }
+
+    onMounted(() => {
+      monitor()
+    })
+
+    onUnmounted(() => {
+    })
+
+    return {
+      numberOfAudioTags,
+      audioTags,
+      playing,
+      checkAudioElementPlaying,
+      errorMessage,
+      monitor,
+      updateCtx
+    }
+  }
+}
+function checkAudioElementsStatus () {
+  // Find all audio elements on the page
+  const audioElements = document.querySelectorAll('audio')
+
+  // Iterate over each audio element to check if it's playing
+  audioElements.forEach((_audioElement, _index) => {
+    //  const _isPlaying = !audioElement.paused && audioElement.currentTime > 0 && !audioElement.ended
+    // useNuxtApp().$logger.log(`Audio Element ${index + 1}: ${isPlaying ? 'Playing' : 'Not Playing'}`, { audioElement })
+  })
+}
+
+</script>
+  <style scoped>
+   /* The switch - the box around the slider */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: #2196F3;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+  </style>