RZGY/src/renderer/components/MusicRelax.vue

<template>
  <div class="main_right_height">
    <el-row>
      <el-col :span="1">&nbsp;</el-col>
      <el-col :span="22">
        <div style="display: flex">
          <i
            class="el-icon-arrow-left"
            style="cursor: pointer; line-height: 1.5"
            @click="goBack()"
          ></i>
          <span class="musicTitle">音乐放松</span>
        </div>

        <!-- <el-divider></el-divider> -->
      </el-col>
      <el-col :span="1"> &nbsp; </el-col>
    </el-row>

    <el-row class="pagin_class">
      <el-col :span="1">&nbsp;</el-col>
      <el-col :span="22" style="border: 1px solid #e1e1e1; margin-bottom: 60px">
        <el-table
          :header-cell-style="{
            background: '#66B497',
            color: '#FFFFFF',
            'letter-spacing': '4px',
          }"
          ref="filterTable"
          :data="tableData"
          style="width: 100%"
          :row-class-name="tableRowClassName"
        >
          <el-table-column
            prop="musicName"
            label="音乐名称"
            align="center"
            width="180px"
          >
          </el-table-column>
          <el-table-column prop="mood" label="情绪" align="center" width="160">
            <template slot-scope="scope">
              <span
                class="tag"
                v-for="item in scope.row.mood"
                :key="item.index"
              >
                {{ item }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="musicStyle"
            label="曲风"
            align="center"
            width="160"
          >
            <template slot-scope="scope">
              <span
                class="tag"
                v-for="item in scope.row.musicStyle"
                :key="item.index"
              >
                {{ item }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="keywords" label="关键词" align="center">
            <template slot-scope="scope">
              <el-popover
                trigger="hover"
                placement="top"
                width="200"
                transition="fade-in-linear"
              >
                <span
                  class="tag"
                  v-for="item in scope.row.keywords"
                  :key="item.index"
                >
                  <!-- {{ index }} -->
                  {{ item }}
                </span>
                <div slot="reference" class="name-wrapper">
                  <span
                    class="tag"
                    v-for="(item, index) in scope.row.keywords"
                    :key="item.index"
                    v-show="index < 4"
                  >
                    <!-- {{ index }} -->
                    {{ item }}
                  </span>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            prop="musicLength"
            label="时长"
            align="center"
            width="80"
          >
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <div
                v-show="scope.row.musicFlag"
                class="change-icon"
                @click="musicPlay(scope.$index, scope.row)"
              >
                <img src="../assets/play2.png" alt="" />
              </div>
              <div
                v-show="!scope.row.musicFlag"
                class="change-icon"
                @click="musicPlay(scope.$index, scope.row)"
              >
                <img src="../assets/play1.png" alt="" />
              </div>
              <p v-show="scope.row.musicFlag">
                {{ timeCo }}
                <el-progress
                  :text-inside="true"
                  :percentage="progressValue"
                  :show-text="false"
                  color="#656161"
                ></el-progress>
              </p>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="1">&nbsp;</el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      timeCo: "00:00",
      indexFlag: 0,
      progressValue: 0,
      progressValueFlag: null,
      tableData: [
        {
          audio: null,
          musicName: "Digitalized Waves Of Unspoken Distances",
          musicLength: "04:06",
          mood: ["史诗", "漂浮"],
          musicStyle: ["电子舞曲"],
          //做梦
          keywords: [
            "嗓音",
            "波形",
            "大厅",
            "气氛",
            "低保真",
            "音源",
            "冥想音乐",
            "平静",
            "氛围",
            "回忆",
            "豪华",
            "夜间",
            "柔软",
          ],
          //播放标志flag
          musicFlag: false,
          path: "/music/Digitalized Waves Of Unspoken Distances.mp3",
        },
        {
          audio: null,
          musicName: "The Everlast",
          musicLength: "02:47",
          mood: ["放松", "和平"],
          musicStyle: ["电子舞曲"],
          keywords: [
            "平静",
            "太阳升起",
            "漂流",
            "觉醒",
            "冥想",
            "瑜珈",
            "宗教",
            "梦想",
            "云",
            "星星",
            "空间",
          ],
          musicFlag: false,
          path: "/music/The Everlast.mp3",
        },
        {
          audio: null,
          musicName: "Vandring",
          musicLength: "03:13",
          mood: ["动感", "梦幻"],
          musicStyle: ["电子舞曲"],
          keywords: [
            "森林",
            "山脉",
            "马刺",
            "自然医学",
            "嗡鸣声",
            "到达",
            "极光",
            "冷杉木",
            "轨道",
            "罗斯拉根",
            "到达",
            "氛围",
            "流浪者",
          ],
          musicFlag: false,
          path: "/music/Vandring.mp3",
        },
        {
          audio: null,
          musicName: "Halcyon Daydream",
          musicLength: "03:56",
          mood: ["放松", "和平"],
          musicStyle: ["Drones"],
          keywords: [
            "睡觉",
            "双声拍",
            "深度浩室",
            "禅",
            "梦想",
            "冥想",
            "镇定",
          ],
          musicFlag: false,
          path: "/music/Halcyon Daydream.mp3",
        },
        {
          audio: null,
          musicName: "Crystal Creek",
          musicLength: "04:24",
          mood: ["和平", "梦幻"],
          musicStyle: ["Drones"],
          keywords: [
            "深度浩室",
            "禅",
            "双耳听觉",
            "节奏",
            "持续低音",
            "波",
            "睡觉",
            "冥想",
            "和平",
            "噪音",
            "伽玛",
          ],
          musicFlag: false,
          path: "/music/Crystal Creek.mp3",
        },
        {
          audio: null,
          musicName: "Focal Point",
          musicLength: "03:24",
          mood: ["放松", "和平"],
          musicStyle: ["Drones"],
          keywords: ["双声拍", "冥想", "焦点", "氛围音乐", "持续低音", "伽玛"],
          musicFlag: false,
          path: "/music/Focal Point",
        },
        {
          audio: null,
          musicName: "Aura",
          musicLength: "01:38",
          mood: ["梦幻", "漂浮"],
          musicStyle: ["电影"],
          keywords: ["睡觉", "平静", "自由", "天使", "精神", "小情绪"],
          musicFlag: false,
          path: "/music/Aura.mp3",
        },
        {
          audio: null,
          musicName: "Plan B",
          musicLength: "01:50",
          mood: ["科幻", "梦幻空间"],
          musicStyle: ["抒情音乐"],
          keywords: ["睡觉", "镇定", "飞行", "宇航员", "水下"],
          musicFlag: false,
          path: "/music/Plan B.mp3",
        },
        {
          audio: null,
          musicName: "A New Beginning",
          musicLength: "04:37",
          mood: ["放松", "和平"],
          musicStyle: ["Drones"],
          keywords: [
            "睡觉",
            "432赫兹",
            "双声拍",
            "内心平静",
            "冥想",
            "氛围音乐",
            "持续低音",
          ],
          musicFlag: false,
          path: "/music/A New Beginning.mp3",
        },
        {
          audio: null,
          musicName: "Dissonant Love",
          musicLength: "03:59",
          mood: ["放松", "梦幻"],
          musicStyle: ["电子舞曲"],
          keywords: ["睡觉", "沙发音乐", "氛围音乐", "持续低音", "和平"],
          musicFlag: false,
          path: "/music/Dissonant Love.mp3",
        },
        {
          audio: null,
          musicName: "In the Arms of Great Despair",
          musicLength: "02:08",
          mood: ["放松", "希望"],
          musicStyle: ["抒情音乐"],
          keywords: ["波形", "水", "鲸鱼"],
          musicFlag: false,
          path: "/music/In the Arms of Great Despair.mp3",
        },
        {
          audio: null,
          musicName: "Dream Simulation",
          musicLength: "04:10",
          mood: ["和平", "梦幻"],
          musicStyle: ["电子舞曲"],
          keywords: ["睡觉", "沉睡", "冥想", "瑜珈", "焦点", "专心"],
          musicFlag: false,
          path: "/music/Dream Simulation.mp3",
        },
        {
          audio: null,
          musicName: "Love Returns",
          musicLength: "01:57",
          mood: ["和平", "梦幻"],
          musicStyle: ["电影", "抒情音乐"],
          keywords: ["平静", "宁静", "催眠曲"],
          musicFlag: false,
          path: "/music/Love Returns.mp3",
        },
        {
          audio: null,
          musicName: "Tones",
          musicLength: "02:18",
          mood: ["放松"],
          musicStyle: ["电子舞曲"],
          keywords: ["宏大", "巨大", "天使", "和谐", "环境音乐"],
          musicFlag: false,
          path: "/music/Tones.mp3",
        },
        {
          audio: null,
          musicName: "Gradation",
          musicLength: "02:15",
          mood: ["放松", "梦幻"],
          musicStyle: ["电影", "Drones"],
          keywords: ["魔法", "气氛", "深蓝海", "海洋", "联系", "害怕"],
          musicFlag: false,

          path: "/music/Gradation.mp3",
        },
        {
          audio: null,
          musicName: "Right to Roam.mp3",
          musicLength: "01:49",
          mood: ["黑暗", "漂浮"],
          musicStyle: ["Drones"],
          keywords: ["洞穴", "不祥", "隧道", "风"],
          musicFlag: false,
          path: "/music/Right to Roam.mp3",
        },
        {
          audio: null,
          musicName: "Fell Asleep.mp3",
          musicLength: "01:59",
          mood: ["放松", "梦幻"],
          musicStyle: ["电影", "Drones"],
          keywords: ["森林", "寺庙", "昆虫"],
          musicFlag: false,
          path: "/music/Fell Asleep.mp3",
        },
        {
          audio: null,
          musicName: "Jungle Explorer",
          musicLength: "02:06",
          mood: ["黑暗"],
          musicStyle: ["Drones"],
          keywords: ["热带", "不祥", "昆虫", "生物", "薄雾", "未知数"],
          musicFlag: false,
          path: "/music/Jungle Explorer.mp3",
        },
        {
          audio: null,
          musicName: "Near Dawn",
          musicLength: "02:47",
          mood: ["放松", "和平"],
          musicStyle: ["电影"],
          keywords: ["沉睡", "禅", "氛围", "温泉", "冥想", "氛围音乐"],
          musicFlag: false,
          path: "/music/Near Dawn.mp3",
        },
        {
          audio: null,
          musicName: "Wren",
          musicLength: "03:36",
          mood: ["放松", "和平"],
          musicStyle: ["电子舞曲"],
          keywords: [
            "沉睡",
            "禅",
            "自然",
            "温泉",
            "放松",
            "瑜珈",
            "氛围音乐",
            "生成",
            "睡觉",
            "随机",
            "机遇音乐",
            "冥想",
            "和平",
          ],
          musicFlag: false,
          path: "/music/Wren.mp3",
        },
        {
          audio: null,
          musicName: "Pure",
          musicLength: "01:56",
          mood: ["放松", "和平"],
          musicStyle: ["轻音乐", "抒情音乐"],
          keywords: ["美丽", "雨", "弦乐", "窗户", "思维"],
          musicFlag: false,
          path: "/music/Pure.mp3",
        },
        {
          audio: null,
          musicName: "Moonrise",
          musicLength: "03:07",
          mood: ["和平", "漂浮"],
          musicStyle: ["电影"],
          keywords: [
            "气氛",
            "睡觉",
            "叙事",
            "延音",
            "焦点",
            "氛围音乐",
            "混响",
            "吉他",
          ],
          musicFlag: false,
          path: "/music/Moonrise.mp3",
        },
      ],
    };
  },
  destroyed() {
    this.tableData[this.indexFlag].audio.pause();
    clearInterval(this.progressValueFlag);
  },
  methods: {
    goBack() {
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].audio !== null) {
          this.tableData[i].audio.pause();
          this.tableData[i].audio = null;
          this.tableData[i].musicFlag = true;
        }
      }

      this.$router.go(-1);
    },
    musicPlay(index, row) {
      this.indexFlag = index;
      this.tableData[index].musicFlag = !row.musicFlag;
      let mp3 = __static + row.path;

      let list = [];
      //刚进来时需要循环是否有正在运行的音乐  //没有的话启动当前的音乐
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].audio !== null) {
          list.push(i);
        }
        if (i !== index) {
          this.tableData[i].musicFlag = false;
        }
      }
      if (list.length == 0) {
        this.tableData[index].audio = new Audio();
        this.tableData[index].audio.src = mp3;
        this.tableData[index].audio.play();

        console.log("当前时长" + this.tableData[index].audio.currentTime);
        console.log("总时长" + this.tableData[index].audio.duration);
        this.computerProcess(index);
      } else if (list.length == 1) {
        //当list等于1时
        //有两种情况，是自身的，和不是自身的
        //是自身的情况下则播放
        //不是自身
        if (list[0] === index) {
          if (this.tableData[index].audio.paused) {
            //this.tableData[index].audio.src = mp3;
            this.tableData[index].audio.play();
            console.log("当前时长" + this.tableData[index].audio.currentTime);
            console.log("总时长" + this.tableData[index].audio.duration);
            this.computerProcess(index);
          } else {
            // this.tableData[index].audio.src = mp3;
            this.tableData[index].audio.pause();
          }
        } else {
          // this.tableData[list[0]].audio.pause();
          this.tableData[list[0]].audio.pause();
          this.tableData[list[0]].audio = null;

          this.tableData[index].audio = new Audio();
          this.tableData[index].audio.src = mp3;
          this.tableData[index].audio.play();
          this.computerProcess(index);
          console.log("当前时长" + this.tableData[index].audio.currentTime);
          console.log("总时长" + this.tableData[index].audio.duration);
        }
      }
    },
    computerProcess(i) {
      this.timeCo = "00:00";
      this.progressValue = 0;
      clearInterval(this.progressValueFlag);
      this.progressValueFlag = setInterval(() => {
        let a = this.tableData[i].audio.currentTime;
        let b = this.tableData[i].audio.duration;

        this.timeCo = this.formatterTimeFun(Math.ceil(a));
        this.progressValue = (a / b) * 100;
        console.log(this.progressValue);
        if (this.progressValue == 100) {
          this.tableData[i].musicFlag = false;
          clearInterval(this.progressValueFlag);
        }
      }, 1000);
    },
    formatterTimeFun(val) {
      let min = Math.floor(val / 60);
      min = this.formatterSs(min);
      let ss = val % 60;
      ss = this.formatterSs(ss);
      return min + ":" + ss;
    },
    formatterSs(val) {
      if (val < 10) {
        return "0" + val;
      } else {
        return val + "";
      }
    },
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 === 0) {
        return "warning-row";
      } else if (rowIndex % 2 === 1) {
        return "success-row";
      }
      return "success-row";
    },
  },
};
</script>
<style>
.el-table .warning-row {
  background: #f5f5f5;
}

.el-table .success-row {
  background: #ffffff;
}

.el-table--enable-row-hover
  /deep/
  .el-table__body
  tr:hover
  > td.el-table__cell {
  background: rgba(223, 246, 237, 1) !important;
}
</style>

<style scoped>
/* .icon_style {
  width: 100px;
  height: 100px;
} */
.el-icon-video-pause {
  cursor: pointer;
  color: #57acbb;
}
.icon-pointer-music {
  cursor: pointer;
  color: #57acbb;
}
.change-icon {
  /* cursor: pointer; */
  text-align: center;
  font-size: 40px;
}

.change-icon img {
  width: 44px;
  height: auto;
}

.moodStyle {
  margin-bottom: 10px;
  margin-right: 10px;
}
.musicTitle {
  display: block;
  font-size: 18px;
  color: #57acbb;
  margin-bottom: 5px;
}
.main_right_height {
  height: 95vh !important;
  display: block !important;
  overflow-y: auto !important;
}

.el-table {
  border-radius: 16px 16px 0px 0px;
  border: none;
}

.el-table .el-table__cell {
  padding: 6px;
}

.tag {
  display: inline-block;
  background: #ffffff;
  border-radius: 40px 40px 40px 40px;
  opacity: 1;
  border: 1px solid #0fb577;
  font-size: 14px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #0fb577;
  padding: 2px 8px;
  margin: 0 5px;
}
</style>