前端学习笔记-8.3Vue实战简易的音乐播放器

最新推荐文章于 2024-04-22 03:07:53 发布

我就是小强

最新推荐文章于 2024-04-22 03:07:53 发布

阅读量348

点赞数

分类专栏：前端文章标签：前端学习笔记 Vue实战案例 Vue实战简易的音乐播放器

本文链接：https://blog.csdn.net/qq_43000359/article/details/82904309

版权

前端专栏收录该内容

43 篇文章 0 订阅

订阅专栏

数据方面用的是mock.js,真实的模拟请求。
这个项目用到的技术栈：
vue + webpack + axios
实现播放页的代码:

import LRC from "../components/LRC"
export default{
  name:"play",
  data(){
    return{
      playData:{
        songinfo:{

        },
        bitrate:{
          file_link:""
        }
      },
      currentTime:null,//当前播放时间
      durationTime:null//整体时间
    }
  },
  methods:{
    addEventListeners(){
      const self = this;
      // console.log(self.$refs.player);
      self.$refs.player.addEventListener('timeupdate',self._currentTime),
      self.$refs.player.addEventListener('canplay',self._durationTime)
    },
    removeEventListeners: function(){
      const self = this;
      self.$refs.player.removeEventListener('timeupdate',self._currentTime),
      self.$refs.player.removeEventListener('canplay',self._durationTime)
    },
    _currentTime(){//回调时间
      var self = this;
      self.currentTime = self.$refs.player.currentTime//currentTime是audio标签提供的获取当前播放时间的方法
    },
    _durationTime(){
      var self = this;
      self.durationTime = self.$refs.player.duration//duration是audio标签提供的获得歌曲播放整体时间的方法
    }
  },
  mounted(){
    this.addEventListeners()
  },
  beforeDestroyed(){
    this.removeEventListeners()
  },
  created(){
    const playUrl = this.HOST + "v1/restserver/ting?method=baidu.ting.song.play&songid="+this.$route.params.songid
    this.$axios.get(playUrl)
    .then(res => {
      this.playData = res.data
    })
    .catch(error => {
      console.log(error)
    })
  },
  components:{
    LRC
  }
}

import LRC from "../components/LRC"
export default{
  name:"play",
  data(){
    return{
      playData:{
        songinfo:{

        },
        bitrate:{
          file_link:""
        }
      },
      currentTime:null,//当前播放时间
      durationTime:null//整体时间
    }
  },
  methods:{
    addEventListeners(){
      const self = this;
      // console.log(self.$refs.player);
      self.$refs.player.addEventListener('timeupdate',self._currentTime),
      self.$refs.player.addEventListener('canplay',self._durationTime)
    },
    removeEventListeners: function(){
      const self = this;
      self.$refs.player.removeEventListener('timeupdate',self._currentTime),
      self.$refs.player.removeEventListener('canplay',self._durationTime)
    },
    _currentTime(){//回调时间
      var self = this;
      self.currentTime = self.$refs.player.currentTime//currentTime是audio标签提供的获取当前播放时间的方法
    },
    _durationTime(){
      var self = this;
      self.durationTime = self.$refs.player.duration//duration是audio标签提供的获得歌曲播放整体时间的方法
    }
  },
  mounted(){
    this.addEventListeners()
  },
  beforeDestroyed(){
    this.removeEventListeners()
  },
  created(){
    const playUrl = this.HOST + "v1/restserver/ting?method=baidu.ting.song.play&songid="+this.$route.params.songid
    this.$axios.get(playUrl)
    .then(res => {
      this.playData = res.data
    })
    .catch(error => {
      console.log(error)
    })
  },
  components:{
    LRC
  }
}