Блог

Я создаю приложение для музыкального проигрывателя и столкнулся со следующей проблемой. В created функции я делаю GET запрос на сервер, который является ответом на объект song с URL-адресом корзины AWS S3. Затем я использую объект song trackPath для инициализации audio src, но audio src ничего не воспроизводит. Похоже, что источник мультимедиа ничего не видит, но когда я проверяю HTML в режиме разработки, html-код исправен, есть ссылка на src prop. Если я «жестко закодирую» ссылку s3 на файл в audio src, он работает нормально. Вот мой код. В чем проблема? Я понятия не имею. Я пробовал с beforeMount и т. Д., Но не работает.

 <template>
  <div class="player">
      <audio controls preload="auto" class="audio-player">
      <source :src="getTrackPath()" type="audio/mpeg"/>
    </audio>
  </div>
</template>

<script>

import axios from 'axios'

import config from '../config'

export default {
  name: 'PlayerComponent',
  mounted () {
    console.log(this.$el)
  },
  created () {
    const token = localStorage.getItem('token')

    axios.get(config.trackURL.concat(`?_id=${this.id}`), {
      headers: {
        'Access-Control-Allow-Origin': '*',
        'Content-Type': 'application/json',
        Authorization: `Bearer ${token}`
      }
    }).then((resp) => {
      this.song = resp.data[0]
    }).catch((err) => {
      console.log(err)
    })
  },
  data () {
    return {
      song: {},
      id: this.$route.params.id
    }
  },
  methods: {
    getTrackPath () {
      return this.song.trackPath
    }
  }
}
</script>