vue.js 3.2.22：自动旋转的音乐播放按钮

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

一，演示代码:

Home.vue

<template>
<div style="width:100%;height: 100vh;">
<div :class="statusClass" @click="buttonClick" style="position:fixed;right:30px;top:30px;"></div>
  <audio ref="music" src="/static/audio/SeeYouAgain.mp3" class="media-audio" loop autoplay ></audio>
</div>
</template>
<script>
import {ref} from "vue"
export default {
  name: "Home",
  setup() {
    //music ref
    const music = ref()
    //class
    const statusClass = ref("stoping")
    //点击播放按钮
    const buttonClick = () => {
        //alert('buttonClick');
         if (statusClass.value === "stoping") {
             //开始播放
              play();
         } else {
             //停止播放
              stop();
         }
    }
    //播放
    const play = () => {
      statusClass.value = "playing";
      music.value.play();
    }
    //停止
    const stop = () => {
      statusClass.value = "stoping";
      music.value.pause();
    }
    return {
      buttonClick,
      music,
      statusClass,
    }
  }
}
</script>
<style scoped>
.playing{background: url('/static/img/music_on.png') no-repeat 0 0;width: 44px;height: 44px;animation: rotating 1.2s linear infinite;}
.stoping{background: url('/static/img/music_off.png') no-repeat 0 0;width: 44px;height: 44px;}
@keyframes rotating {
  from{
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to{
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
</style>

说明：刘宏缔的架构森林是一个专注架构的博客，地址：https://www.cnblogs.com/architectforest

         对应的源码可以访问这里获取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，测试效果

停止时：

播放时:

三，查看vue的版本:

liuhongdi@lhdpc:/data/vue/audio$ npm list vue
audio@0.1.0 /data/vue/audio
├─┬ @vue/cli-plugin-babel@4.5.15
│ └─┬ @vue/babel-preset-app@4.5.15
│   └── vue@3.2.22 deduped
└─┬ vue@3.2.22
  └─┬ @vue/server-renderer@3.2.22
    └── vue@3.2.22 deduped

以上是 vue.js 3.2.22：自动旋转的音乐播放按钮 的全部内容， 来源链接： utcz.com/z/375135.html

回到顶部