一,演示代码:
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>
二,测试效果
停止时:
播放时:
说明:刘宏缔的架构森林—专注it技术的博客,
网址:https://imgtouch.com
本文: https://blog.imgtouch.com/index.php/2023/05/28/vue-js-3-2-22-zi-dong-xuan-zhuan-de-yin-yue-bo-fang-an-niu/
代码: 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