vue的练习项目（二）——aplayer播放器

最近写一个文字转语音的页面，语音转换完成后要播放，于是就用上了vue-aplayer

安装vue-aplayer

npm install vue-aplayer –save

引入并配置aplayer组件

import Aplayer from 'vue-aplayer'
components: {
          Aplayer
      	},

接下来就可以直接使用了

当然根据实际情况，我只需要给他一个url参数就行了

先在语音转换页面提交表单，发送post请求，将返回的VoicePath用session保存下来

submitForm(formName){
    var api='http://118.25.229.125:8888/api/v1/text_voice/';
    this.$http.post(api,{
    //字符串
    lan:this.voiceForm.content,
    //音量
    vol:this.voiceForm.vol,
    //音调
    pit:this.voiceForm.tone,
    //语速
    spd:this.voiceForm.speed,
    //发音人
    per:this.voiceForm.radio},{emulateJSON: true}).then((response)=>{
        console.log(response);
             
        this.url = response.body.VoicePath;
        if(this.url){
             sessionStorage.setItem('url', this.url);
             this.$router.push({path:'/Player'});
        }else{
             alert('转换失败！');
             }
         },function(err){
             console.log(err);
         });            
        },

在播放页面，通过session拿到url数据，把他的值给aplayer参数就行了

结果遇到了问题，当时通过response拿到的数据是这样的

原来这个VoicePath得到的路径需要修改一下

修改成http://118.25.229.125:8888/api/v1/text_voice/?VoicePath=/home/littlecute/TEST/MP3_File/8bfa1f1e766a35e23cc6346478034ed1.mp3就可以访问了

接着又遇到一个问题，由于aplayer的参数都是先配置好的，而我的路径是等传过来之后才赋值给url，导致的结果就是参数修改成功，可是页面却不能重新渲染

试了很多解决方法，最后发现是，当页面加载的时候aplayer就开始play了，于是给他一个判断v-if，等我把获取到的url值给他之后再让他play。

下面是我的代码

html

js