electron设置系统音量 静音

electron设置系统音量

支持系统: macOS , Windows(>= Vista) 和 Linux(ALSA)

所需插件: loudness

实现功能: 调节系统音量,静音,解除静音.

实现效果

安装

npm i loudness --save

核心方法

const loudness = require('loudness')
//  设置音量 值为number
await loudness.setVolume(45)
//  获取当前音量
const vol = await loudness.getVolume()
// vol = 45
//  设置静音
await loudness.setMuted(false)
// 获取是否为静音状态 false true
const mute = await loudness.getMuted()

electron -vue 中使用

注意: 直接在vue 引用会报错,这里建议新建一个Volume.js

新建一个Volume.js

内容如下：

const loudness = window.require("loudness");

// 设置音量为特定值
function setVol(a = 45) {
  loudness.setVolume(a);
  dismuted();
}
// 获取当前音量
function getVol() {
  return loudness.getVolume();
}
// 设置和取消静音
async function setmuted(a = true) {
  
  if (a) {
    // console.log(a, "取消静音");
    //   取消静音
    await loudness.setMuted(false);
    return false;
  } else {
    // console.log(a, "设置静音");
    //   设置静音
    await loudness.setMuted(true);
    return true;
  }
}

module.exports = {
  setVol,
  getVol,
  setmuted,

};

在vue使用

const Volume = require("../plugins/Volume");
// import { setVol } from "../plugins/Volume";
export default {
  data() {
    return {
      valumes: 100,
      ismuted: false,
...
 watch: {
    valumes(a) {
      // 监听音量
      Volume.setVol(a);
    },
...
methods: {
  //静音
    async muted() {
      let aa = await Volume.setmuted(this.ismuted);
      this.ismuted = aa;
    },
  //获取音量
    async getvalue() {
      let aa = await Volume.getVol();
      this.valumes = aa - 0;
      console.log(aa);
    },
  },

vue element-ui代码 实现ui

volume 组件是采用elementui和阿里巴巴矢量图库绘制，采用css flex布局

参考如下

 <div class="volumes-control">
            <i
              class="el-icon-zc-soundsize icon"
              v-if="!ismuted"
              @click="muted"
              title="系统静音"
            ></i>
            <i
              v-else
              @click="muted"
              class="el-icon-zc-mutemode icon"
              title="恢复系统声音"
            ></i>
            <el-slider style="width: 100px" v-model="valumes"></el-slider>
            
 </div>
 

CSS参考

.volumes-control {
  display: inline-block;
  height: 30px;
  text-align: center;
  margin-left: 30px;
  font-size: 14px;

  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 150px;
}
.icon {
  display: block;
  font-size: 30px;
  cursor: pointer;
  color: white;
}