vue.js TypeError:无法读取null的属性“isPaused”

vlf7wbxs  于 2023-11-21  发布在  Vue.js
关注(0)|答案(1)|浏览(192)

我试图在我的vue前端应用程序中使用wavesurfer.js。在我从后端获得音频文件的链接后,我得到了这个错误:

wavesurfer.js?8896:5179 Uncaught (in promise) TypeError: Cannot read property 'isPaused' of null
    at WaveSurfer.empty (wavesurfer.js?8896:5179)
    at WaveSurfer.load (wavesurfer.js?8896:4852)
    at _callee$ (GameScreen.vue?dcce:42)
    at tryCatch (runtime.js?96cf:63)
    at Generator.invoke [as _invoke] (runtime.js?96cf:293)
    at Generator.eval [as next] (runtime.js?96cf:118)
    at asyncGeneratorStep (asyncToGenerator.js?1da1:3)
    at _next (asyncToGenerator.js?1da1:25)
    at eval (asyncToGenerator.js?1da1:32)
    at new Promise (<anonymous>)

字符串
这是我在vue组件中使用的代码

<script>
import axios from 'axios';
import wavesurfer from 'wavesurfer.js';

export default {
  name: 'GameScreen',
  data(){
    return {
      isLoading: true,
    }
  },
  mounted(){
    this.initAudio();
  },
  methods: {
    initAudio(){
      axios.get('http://localhost:6060/track').then( async (response) => {
        console.log(response.data);
        
        const waveform = new wavesurfer({
          container: this.$refs.wave,
          color: 'violet',
          backend: 'MediaElement'
        });
        
        await waveform.load(response.data);

        await waveform.on('ready', () => {
          this.isLoading = false;
          //waveform.play();
        });

        console.log(waveform);
      });
    }
  }
}
</script>


代码中有什么错误吗?或者我可以做些什么来解决这个问题?

更新

这个问题已经结束了,我想发布解决方案,但不可能。无论如何,问题是我在示例化库时犯了一个错字。我忘记调用create方法。要正确示例化WaveSurfer,语法是new WaveSurfer.create({...}),而不仅仅是new WaveSurfer({})
谢谢你们的帮助

fjnneemd

fjnneemd1#

我意识到这是一个老问题,但我前几天遇到了这个问题。它发生在客户端导航离开包含Wavesurfer组件/元素的页面时。我最终这样做来捕获事件:

let firstLoadFailure = false;
    try {
        const response = await fetch(this.callUrl);

        const blob = await response.blob();
        const blobUrl = URL.createObjectURL(blob);

        this.wavesurfer.load(blobUrl);
    } catch (error) {
        firstLoadFailure = true;
    }

    if (firstLoadFailure) {
        try {
            this.wavesurfer.load(this.callUrl);
        } catch {
            // nothing more we can do
        }
    }

字符串
希望这将有助于任何人谁是碰到它

相关问题