python + vue + electron实现本地音乐播放器_electron 集成python

前言

因为受够了一般音乐播放软件的各种没什么用的功能以及各种垃圾广告，所以想自己搞一个音乐播放器来用，花了几天时间就搞了这么个东西，跟大家分享一下。
这个文档并不是针对前端新手的，所以如果你接触前端不久就简单了解一下就好。
代码已经在我的Github上了，代码里也加了点注释，真的对这个很感兴趣的可以下载下来自己试试。
这篇文章的叙述思路跟我实际开发的思路相同，主要分成三个步骤，下面将一步一步地说。

第一步，使用vue做个网页播放器

这是这个项目的重点，毕竟我本身就是个前端，先实现一个网页版来满足基本要求。

1. 先写个audio标签

在网页上播放音乐，首先想到的肯定是audio标签，那么第一步就很简单了，在页面上放个audio。

 <audio :src="songUrl" ref="audio"></audio>
1

要是偷懒可以直接用audio自己带的功能来实现对音乐播放的控制，因为我以前常用酷狗，所以打算仿照它的样子搞一版，就不能用原生的内容要自己定义，这是前端内容里比较复杂的一点。此处内容我倒是不太想赘述，因为与之相关的内容很容易就能搜索到，就简单的贴一下相关代码。

  mounted () {
   
    this.audio = this.$refs.audio
    // 绑定监听事件实时获取歌曲时间信息
    this.audio.addEventListener('timeupdate', () => {
   
      this.currentTime = this.audio.currentTime
      this.$emit('update:current', this.currentTime)
      if (this.currentTime >= this.duration && this.currentTime > 0) {
    // 一首歌播放完自动播放下一首
        this.handoverSong('next')
      }
    })
    // 获取歌曲时长
    this.audio.addEventListener('canplay', () => {
   
      this.duration = this.audio.duration
    })
    // 歌曲可以播放时才允许播放
    this.audio.addEventListener('loadeddata', () => {
   
      if (this.audio.readyState >= 2 && this.playStatus) {
   
        this.playMusic()
      }
    })
  },
  methods: {
   
    playMusic () {
    // 切换播放状态
      if (this.duration > 0) {
   
        this.playStatus = true
        this.audio.play()
      }
    },
    pauseMusic () {
    // 暂停状态
      this.playStatus = false
      this.audio.pause()
    },
    clickIcon () {
    // 点击播放或者暂停按钮切换状态
      this.playStatus ? this.pauseMusic() : this.playMusic()
    },
    formatSeconds (value) {
    // 时间标准化为xx:xx
      let s = parseInt(value) // 秒
      s = isNaN(s) ? 0 : s
      let m = 0 // 分
      if (s > 60) {
   
        m = parseInt(s / 60)
        s = parseInt(s % 60)
      }
      return m.toString().padStart(2, '0') + ':' + s.toString().padStart(2, '0')
    },
    adjustSong (type) {
    // 快进快退操作
      if (this.duration > 0) {
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61