Howler.js не распознает путь src к аудиофайлу - PullRequest
Новая
       20

Howler.js не распознает путь src к аудиофайлу

0 голосов
/ 10 января 2019

После успешного воспроизведения аудиофайла с помощью встроенного аудиотега HTML5 я пытаюсь переключиться на использование howler.js .

Я убедился, что howler.js правильно установлен и что метод, который создает / воспроизводит мою песню, вызывается с console.log, но я не совсем понимаю, почему путь здесь не распознается: 

new Howl({src: ['../music/lofi.mp3']})

в то время как тот же путь работает здесь отлично: 

<audio autoplay>
    <source src="../music/lofi.mp3" type="audio/mpeg" id="track"/>
</audio>

export default {
    name: "HelloWorld",
    methods: {
        pickRandomSong() {
            var sound = new Howl({
                src: ['../music/lofi.mp3']
            })
            sound.play()
            console.log('shoulda played that sound!')
        beforeMount() {
            this.pickRandomSong()
        }

...

Я также попытался поместить lofi.mp3 в тот же каталог, что и этот файл vue, и обновить соответствующий путь (lofi.mp3), но, похоже, это тоже не работает.

Интересно, имеет ли это какое-то отношение к методу, вызываемому в beforeMount(). Впервые экспериментирую с VUE, но пока не разбираюсь в этом

1 Ответ

0 голосов
/ 10 января 2019

Не видя полной реализации структуры вашего компонента, я подозреваю, что данные не инициализированы в компоненте, или привязка к src должна быть :src.

Однако есть реализация Vue-howler, которая работает как миксин.

установка: npm install vue-howler --save

создать компонент аудиоплеера: 

<script>
import VueHowler from "vue-howler";

export default {
  mixins: [VueHowler]
};
</script>

<template>
  <div>
    <span>Total duration: {{ duration }} seconds</span>
    <span>Progress: {{ progress * 100 }}%</span>
    <button @click="togglePlayback">{{ playing ? "Pause" : "Play" }}</button>
    <button @click="stop">Stop</button>
  </div>
</template>

используйте его в вашем экземпляре вида: 

<script>
import AudioPlayer from "./components/audio-player.vue";

export default {
  components: {
    AudioPlayer
  },

  data() {
    return {
      audioSources: ["http://www.hochmuth.com/mp3/Haydn_Cello_Concerto_D-1.mp3"]
    };
  }
};
</script>

<template>
  <div><audio-player :sources="audioSources" :loop="true"></audio-player></div>
</template>

коды и флажки: Демо

...