vue3+ts 实现图标控制音乐播放

效果图
代码
避雷

前言：最近负责一个展示型项目需要背景音乐且可以控制播放

效果图

代码

<template><div class="img-box"><imgref="imgRef":class="{ rotate: playStatus }"src="https://storage.beta.custouch.com/res/8082/stopMusic.png"alt="music"@click="controlMusic"/><audio ref="audioRef" :src="musicUrl" loop @play="onPlay"></audio></div>
</template>
<script lang="ts">import { ref } from 'vue'export default {name: 'Music',setup() {const audioRef = ref<null|HTMLAudioElement>(null)const imgRef = ref<null|HTMLImageElement>(null)let playStatus = ref(false)const musicImg = ref({play: 'https://storage.beta.custouch.com/res/8080/music.png',pause: 'https://storage.beta.custouch.com/res/8082/stopMusic.png'})const musicUrl = 'https://storage.beta.custouch.com/res/audios/38/bgmusic.mp3'const controlMusic = () => {if (audioRef.value && imgRef.value) {if (playStatus.value) {audioRef.value.pause()imgRef.value.src = musicImg.value['pause']} else {audioRef.value.play()imgRef.value.src = musicImg.value['play']}}playStatus.value = !playStatus.value}return { musicUrl, audioRef, controlMusic, imgRef, playStatus }}}
</script>
<style scoped lang="less">// 元素持续旋转关键帧@keyframes rotation {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}.img-box {width: 27px;height: 27px;img {width: 100%;height: 100%;}}// 旋转类.rotate {animation: rotation 3s linear infinite;}
</style>

避雷

我一开始直接在watchEffect监听audio的值有值就直接调用play()
控制台报错

play() failed because the user didn’t interact with the document first.

内容大致意思是开发者不能利用手中权限去给用户造成噪音干扰，首次加载页面需要用户和audio/video进行交互
我这边就设置为点击音乐图标后再播放音乐

vue3+ts 实现图标控制音乐播放相关推荐

uni-app 点击图标控制音乐播放
uni-app官方链接:https://uniapp.dcloud.io/api/media/audio-context?id=createinneraudiocontext <template ...
html制作自动切换音乐按钮代码,HTML5+JavaScript+CSS实现音乐播放器——难点二:自己设计一个控制音乐播放的控制器...
我们都知道HTML5给我们提供了"controls"这个插件,可是这个插件却比较丑,还不能实现上一首下一首的播放,以及进度条的手动改变等功能,那么如何自己设计一个控制音乐播放的控制 ...
python基于yolov3实现的手势控制音乐播放器
python基于yolov3实现的手势控制音乐播放器效果演示总体框架手势识别模块音乐播放器模块一个小总结吧效果演示话不多说,先上最后的成品展示. python基于yolov3实现的手势控 ...
iOS锁屏页面控制音乐播放
//1.调整音频会话设置,确保应用进入后台或静音开关已开启时音频仍将继续播放 2.锁屏状态下显示媒体信息 3.锁屏上的空间可以控制音频播放#import "ViewController.h& ...
Android音乐播放器---实现Notification控制音乐播放
最近一直在学习Android服务(Service).广播接收者(BroadcastReceiver).通知(Notification)的用法,趁着刚学完的热乎劲儿,做了个音乐播放器来练手.在此,我就把 ...
android 锁屏显示音乐播放器,Android锁屏界面控制音乐播放
目前,在锁屏界面控制音乐播放有两种常用方式. 第一种方式:原生Android系统及自带音乐播放器. 锁屏界面端: 原生Android中,锁屏界面相关的UI由KeyguardHostView提供,Key ...
基于百度飞桨PaddlePaddle模型训练的手势识别模型控制音乐播放器
基于百度飞桨paddle模型训练的手势识别模型控制音乐播放器前言一.什么是百度飞桨PaddlePaddle? 一.1 飞桨AI Studio 二.实际使用 1.配置虚拟环境 2.安装三.实战四 ...
android连接蓝牙控制音乐播放器播放暂停/上一曲/下一曲，且断开蓝牙暂停音乐
客户需求要蓝牙设备可以控制音乐播放器的暂停等操作,当时只做了蓝牙的权限配置,未对这些操作做处理. 1.配置清单文件 <serviceandroid:name=".PlayerServi ...
[MAUI 项目实战] 手势控制音乐播放器（一）：概述与架构
这是一篇系列博文.请关注我,学习更多.NET MAUI开发知识! [MAUI 项目实战] 手势控制音乐播放器(一): 概述与架构 [MAUI 项目实战] 手势控制音乐播放器(二): 手势交互 [MAU ...

vue3+ts 实现图标控制音乐播放

vue3+ts 实现图标控制音乐播放

效果图

代码

避雷

vue3+ts 实现图标控制音乐播放相关推荐

最新文章

热门文章