vue添加背景音乐

最新推荐文章于 2024-04-21 09:52:25 发布
最新推荐文章于 2024-04-21 09:52:25 发布
阅读量2.8k 收藏 3
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39216281/article/details/103687841
版权
本文介绍了如何在Vue应用中实现在页面加载时自动播放并循环背景音乐的功能。通过监听'touchstart'事件来触发音乐播放，并在音乐播放结束后重新加载音频文件以实现循环播放。
摘要由CSDN通过智能技术生成

在这里插入图片描述

//不适配iphone
<audio id="audio"  :src="require('../assets/happy.mp3')"></audio>

//适配iphone
<audio controls>
   <source src=
最低0.47元/天 解锁文章
qq_39216281
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue 开发的微信公众号网页 添加背景音乐，以及音乐图标旋转动画
yhe2008的博客
08-03 1095
这里可以解决你遇到的几个问题 每个页面添加背景音乐 加上一些H5小动画（音乐图标） 页面切换的时候音乐不重新播放 音乐自动播放 首先我的这部分代码是添加到app.vue当中, 也就是主模版文件当中。废话不多说，直接上代码 第一部分 模版主要主要实现播放按钮旋转 我用了2个keep-alive标签 。 刚开始把 audio 和 img（播放控制按钮）放在一起，出现了报错，所以就分开放了。 // 文件位置 app.vue <template> <keep-alive>
vue 全局背景音乐
m0_46820776的博客
11-12 2821
<template> <div id="app"> <router-view /> <!-- 背景音乐 --> <audio src="./assets/bj.mp3" loop='true' autoplay="autoplay" ref="MusicPlay" hidden ></audio> </d.
推荐开源项目：Vue-Music-Player - 一款强大的Vue.js音乐播放器组件
gitblog_00050的博客
04-21 606
推荐开源项目：Vue-Music-Player - 一款强大的Vue.js音乐播放器组件 项目地址:https://gitcode.com/Kooklen/vue-music-player Vue-Music-Player 是一个基于Vue.js框架构建的高质量音乐播放器组件。该项目旨在为开发者提供一个易于集成、功能丰富的音乐播放解决方案，让在Web应用中添加音乐播放功能变得更加简单。 技术分析 ...
audio插入背景音乐_vue.js怎么添加背景音乐
weixin_35924003的博客
01-12 1110
本文环境：windows7、vue2.9.6，该方法适用于所有品牌的电脑。vue.js添加背景音乐的方法：1. VUE 中 mp3 播放的loader 配置webpack.base.conf.js 中{test: /\.(mp3)(\?.*)?$/,loader: 'url-loader',options: {name: utils.assetsPath('assets/[name].[hash:...
vue中设置背景音乐
csl125的博客
08-21 2800
<audio :src="MP3" loop ref="MusicPlay"></audio> musicPause () { this.$refs.MusicPlay.pause() }, musicPlay () { this.$refs.MusicPlay.play() ...
vue背景音乐，点击音效audio实现
sunluyi的博客
04-03 4381
<audio ref="audio" :src="audioUrl"></audio> data() { return { audioUrl:require('../../common/images/energy_charge/my.mp3'),//声音文件 } } methods:{ play(){ this.$refs.audio.play();//点击...
VUE3页面背景音乐
weixin_51263829的博客
01-16 805
= =网上找到不知道为什么总有莫名其妙的报错，这是改出来好用的。
【Vue 公众号网页设置全局背景音乐】
Suger的博客
11-30 611
web页面添加背景音乐
vue项目JS播放音频音效和背景音乐
鹏多多的博客
09-08 5824
博主最近在做一个线上直播互动课堂的Vue项目，里面有一些这样的互动：老师奖励学生A一个奖章，要自动播放得奖的音效。得到这个需求，博主立马开码。 myPlay(){ let mp3 = new Audio(); mp3.src = "./奖励的声音.mp3"; mp3.load(); mp3.play(); setTimeout(() => { mp3.pause(); }, 3000); } 结果一直报错 度娘告诉我，浏览器18年改版
Vue 自定义音乐播放器组件为H5添加背景音乐
S筱潇S四维Smile
02-19 3084
自定义音乐播放器组件为H5添加背景音乐： 1.创建music.vue组件 &lt;template&gt; &lt;div&gt; &lt;div @click="changeOn" :class="isOff?'isOff':'isOn'"&gt;&lt;/div&gt; &lt;audio id="audio" :src="
vue.js音乐播放器样式特效
07-24
Vue.js音乐播放器样式特效是利用前端框架Vue.js构建的一款具有动态效果的MP3音乐播放器，它能够实现自动循环播放的功能，为用户提供流畅且美观的音乐体验。Vue.js以其轻量级、组件化和易上手的特点，在前端开发领域...
html5旋转音乐图标，控制背景音乐jquery.rotate
05-31
本项目通过jQuery库实现这一功能，提供了友好的用户界面，允许用户轻松地暂停和开始背景音乐。下面我们将深入探讨相关知识点。 首先，`html5`是现代网页开发的基础，它引入了许多新的元素和API，极大地增强了网页的...
vue2.0+SVG实现音乐播放圆形进度条组件
10-16
在本文中，我们将深入探讨如何使用Vue2.0和SVG技术来实现一个音乐播放的圆形进度条组件。这个组件能够动态地展示音乐的播放进度，并且具有良好的视觉效果。首先，我们来看看组件的核心代码。 在`<template>`部分，...
krpano加入背景音乐文件及插件
11-09
在本文中，我们将深入探讨如何在krpano项目中添加背景音乐以及使用相关的插件。首先，让我们了解krpano的基本概念，然后逐步解析如何实现背景音乐功能。 krpano是一个基于Flash和HTML5的全景图像和虚拟现实视图的...
旋转相册纯前端模版，支持背景音乐
11-29
"背景音乐"的添加是此模版的一大特色，它允许用户为相册配置背景音乐，增强了故事叙述感。这通常需要前端开发者使用HTML5的Audio API来处理音频播放，包括播放、暂停、音量控制等功能，并确保音乐与图片切换的同步。...
udp分片报文pcap文件
07-18
udp分片报文pcap文件：64kudp大包分成每片658字节总计100片
计算机教学导案.doc
07-18
计算机
摩根：2024年大市前瞻.pdf
最新发布
07-18
摩根：2024年大市前瞻
vue背景音乐自动播放
08-15
在Vue中，要实现背景音乐的自动播放，需要在App.vue文件中进行相关设置和处理。首先，在App.vue的<template>标签中，需要添加一个音乐图标和音乐资源的元素，并给它们添加相应的样式和事件。可以使用一个div元素作为容器，其中包含一个img标签来显示音乐图标，并通过绑定点击事件来控制音乐的播放和暂停。同时，还需要在div元素中添加一个audio标签，用来引入音乐资源，设置preload属性为"auto"，controls属性为true，loop属性为true，并通过hidden属性来隐藏音频播放器。这样，音乐资源就可以在页面加载时进行预加载，并且可以通过控制音乐图标的点击事件来控制音乐的播放和暂停。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [【Vue 公众号网页设置全局背景音乐】](https://blog.csdn.net/qq_35057009/article/details/128111586)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [vue项目的自动播放背景音乐](https://blog.csdn.net/qq_43459224/article/details/103736668)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值