Vue 背景音乐点击随机播放

Vue 背景音乐随机播放，图片点击旋转和暂停

<div  id="music" @click="music" :class="{'cilcle' : iscilcle}" ><img src="../../../assets/images/zysx/music.png" alt=""><audio id="audio" loop ref="audio" autoplay :src="musicUrl"></audio></div><style>
#music{width: 100px;height: 100px;}.cilcle{animation: myfirst 5s infinite linear;}
@keyframes myfirst{from {transform: rotate(0deg);}to {transform: rotate(360deg);}}
#music>img{width: 100%;height: 100%;}
</style>

data() {return {iscilcle:false,musicUrl:'',musicList:[{ src: "01.mp3" },{ src: "02.mp3" },{ src: "03.mp3" },],}},
methods: {music(){var audio = document.getElementById('audio');if (audio.paused) {let temp = this.index;while(this.index==temp){//你有几首歌曲在后面*n 序列是从0开始的this.index = parseInt(Math.random()*3);    console.log(this.index);}this.musicUrl = require("../../../assets/msMusic/" + this.musicList[this.index].src)audio.play();  // 播放      this.iscilcle=true;} else {this.musicUrl = ''console.log(this.index);audio.pause();// 暂停this.iscilcle=false;}}}

一、随机播放需要在data里面定义你所需要的几条音乐，二、在点击播放的时候做一个随机数，这里的index类似于索引，三、因为是本地音乐所以要require（地址+list数组[索引值].src），四、在进入其他页面再回到本页面点击暂停会出现两个首音乐同时播放，需要在else里面清空this.musicUrl，就可以解决。

点击播放图片进行旋转背景随机播放随机音乐，再点击图片暂停旋转回到初始位置，背景音乐暂停播放。

Vue 背景音乐点击随机播放相关推荐

ipad iphone开发_如何在iPhone或iPad上随机播放或重复播放歌曲
ipad iphone开发 You can add variety to your music listening experience on iPhone and iPad by turning o ...
QQ音乐的随机播放是真的随机吗？
其实我早就怀疑这个随机播放不像是随机啊,因为我自己经常躺在床上随机听歌,但是有些歌经常随到,但是有些歌老是听不到. 所以今天刚好也无聊,就拿自己的歌单做个测试. 首先我把自己的一个歌单拷出来: 歌单 ...
html 不间断背音乐代码,请参考不用框架结构做出 “页面间跳转而不间断的背景音乐”每次进去还是随机播放...
同事问的如果不用Frame怎么让背景音乐不间断播放呢于是撒网在百度里搜··· 搜到了这个··真是高手呀·· var Media = new ActiveXObject("MediaPlay ...
UE4角色受击动画，随机播放音效
笔者之前已经写了如何判断受攻击的部位 http://blog.csdn.net/ak724730211/article/details/51858799 这篇讲述如何实现受攻击播放动画效果及音效一: ...
js网页点击播放背景音乐，再次点击暂停播放背景音乐
萌新正在学习前端js 尝试用js 效果: 点击艾欧尼亚昂扬不灭时播放音乐,再次点击暂停播放原理: 1.给这个div中添加 audio属性 js控制当点击这个div时播放再次点击暂停 html中代 ...
用vue简单写一个音乐播放器
简单地写一个功能比较全的音乐播放器前言因为音乐播放器是一个很可能在项目遇到的东西,早写总比晚写好.趁没事先写个. 思路一个音乐播放器该有的东西: 封面,歌名,专辑,作者控制器(上一首,下一首, ...
Vue+Vuex+Element-ui实现歌曲播放控件、播放列表功能
写在前面: 根据思路写代码和写文章的区别还是挺大的,后者更多需要的是一个总结表述的能力,以及需要判断文章中呈现的东西是否有价值.做笔记和写博客同样是在记录,而博客还承担了一个供别人浏览的职能,所以如何 ...
技术宅硬核跨年，DIY墨水屏日历：自动刷新位置、天气，随机播放2000多条「毒鸡汤」| 开源...
贾浩楠鱼羊发自凹非寺量子位报道 | 公众号 QbitAI 自制一个电子墨水屏日历,需要几步? 是能自动刷新位置.天气情况,还能随机播放2000多条毒鸡汤的那种. ↑↑↑就像这样:如果我的人生 ...
animation基础练习源码_用vue简单写一个音乐播放组件「附源码」
作者:vipbic 转发链接:https://segmentfault.com/a/1190000022980992 前言上次小编也分享一个关于Vue 开发过音乐播放对项目: 基于 electron ...
php+api抖音随机播放视频源码
简介: php+api抖音随机播放视频源码,前端纯静态html+css,数据采用php+API接口调用第三方数据,不需要配置环境,上传即用. 源码体积小,视频采集自网络,无视频资源,内置多条播放线路. ...

Vue 背景音乐点击随机播放

Vue 背景音乐随机播放，图片点击旋转和暂停

点击播放图片进行旋转背景随机播放随机音乐，再点击图片暂停旋转回到初始位置，背景音乐暂停播放。

Vue 背景音乐点击随机播放相关推荐

最新文章

热门文章