Helpers para diversas situações - Vue.js / JS

helpers.js

// Função helper que faz adicionar query na url sem dar reload na página
addQueryParam (param) {
      const currentQuery = { ...this.$route.query }
      currentQuery.key = param

      const newUrl = `${window.location.pathname}?${new URLSearchParams(currentQuery).toString()}`

      // Use history.replaceState para alterar a URL sem recarregar o componente
      window.history.replaceState({}, '', newUrl)
  }

// verificar se tem suporte a reconhecimento de fala no navegador
if ('speechSynthesis' in window) {
      console.log('Speech recognition supported 😊')
    } else {
      console.log('Speech recognition not supported 😢')
      toast(this, 'danger', 'Speech recognition not supported 😢')
    }

//mixin de funções para retornar audio de url externa com axios + play e pause de audio
export default {
  data () {
    return {
      isSpeaking: false,
      audioPlayer: null,
      isLoadingAudio: false
    }
  },
  methods: {
    toggleAudio (message, voice) {
      if (!this.isSpeaking) {
        this.playAudio(message, voice)
      } else {
        this.pauseAudio()
      }
    },
    playAudio (message, voice) {
      this.isLoadingAudio = true
       //adapte para o modo como você chama o axios 
      axios.post('/seu-endpoint', { seus_dados }).then((response) => {
        const audioUrl = response.data.audio // substitua pelo seu response
        this.audioPlayer = new Audio(`https://url-da-sua-api.com/${audioUrl}`)

        this.audioPlayer.addEventListener('ended', () => {
          this.isSpeaking = false
        })
        this.isLoadingAudio = false
        this.audioPlayer.play()
        this.isSpeaking = true
      }).catch((error) => {
        this.isLoadingAudio = false
        console.error('Erro ao acessar o microfone:', error)
        toast(this, 'danger', 'Erro ao enviar para a API', error)
      })
    },
    pauseAudio () {
      this.audioPlayer.pause()
      this.isSpeaking = false
      this.isLoadingAudio = false
    }
  }
}