audio示例-基于Vue的一个小项目(上传音乐链接)

play() 播放歌曲

pause() 暂停歌曲

load()重新加载歌曲

4 onloadedmetadata 事件在指定视频/音频(audio/video)的元数据加载后触发。

视频/音频(audio/video)的元数据包含: 时长,尺寸大小(视频),文本轨道。

视频/音频(audio/video)在加载过程中,触发的顺序如下:

onloadstart

ondurationchange

onloadedmetadata

onloadeddata

onprogress

oncanplay

oncanplaythrough

https://www.cnblogs.com/leinov/p/3896772.html

https://segmentfault.com/a/1190000015805754

例子:用Vue写出如下样式

在这里插入图片描述

解析:

1 先写出HTML样式

<input type=“range” style=“padding: 0; margin: 0;width: 100%;”

v-model=“sliderTime” min=“0” max=“100” @change=“changeCurrentTime”>

<audio id=“audio-1” :src=“song.musicUrlAudio” ref=“audio” autoplay=“autoplay” οnended=“nextMusic()”

@pause=“onPause”

@play=“onPlay”

@timeupdate=“onTimeupdate”

@loadedmetadata=“onLoadedmetadata” >

左右两边的时间怎么获得呢?

v-text不解释标签,也就是直接输出获取的数据,v-text使用过滤器,通过$options.filters进行使用

v-text如何使用filters:https://jingyan.baidu.com/article/e52e36151dae2040c60c51f0.html

filters: {

formatSecond(second = 0) {

return realFormatSecond(second);

}

}

// 将整数转换成 时:分:秒的格式

function realFormatSecond(second) {

var secondType = typeof second

if (secondType === ‘number’ || secondType === ‘string’) {

second = parseInt(second)

var mimute = Math.floor(second / 60)

second = second - mimute * 60

return (‘0’ + mimute).slice(-2) + ‘:’ + (‘0’ + second).slice(-2)

} else {

return ‘00:00’

}

}

Vue的method方法里面

// 当timeupdate事件大概每秒一次,用来更新音频流的当前播放时间

onTimeupdate(res) {

this.audio.currentTime = res.target.currentTime;

this.sliderTime = parseInt(this.audio.currentTime / this.audio.maxTime * 100);

},

onLoadedmetadata(res) {

console.log(this)

console.log(res)

this.audio.maxTime = parseInt(res.target.duration);

},

changeCurrentTime() {

this.$refs.audio.currentTime = parseInt(this.sliderTime / 100 * this.audio.maxTime)

},

打印出的this

在这里插入图片描述

audio.currentTime=> 打印 res.target.duration通过parseInt转化为整数就是整首歌的时长

在这里插入图片描述

那,最左边的那个时间怎么变化,那个滑竿怎么跟着变呢?

过滤器里面返回了这个函数:realFormatSecond

解决进度条:

http://www.cnblogs.com/lalalagq/p/9961959.html

https://blog.csdn.net/fgdfgasd/article/details/82152482?utm_source=blogxgwz5

在这里插入图片描述

源码:

<input type=“range” style=“padding: 0; margin: 0;width: 100%;”

v-model=“sliderTime” min=“0” max=“100” @change=“changeCurrentTime”>

<img width=“30px;” height=“auto” id=“preBtn” src=“images/pre1.png” alt=“” @click=“preMusic” />

<img width=“30px;” height=“auto” id=“playBtn” :src=“audio.playing ? ‘images/play1.png’ : ‘images/pause1.png’” alt=“” @click=“startPlayOrPause” />

<img width=“30px;” height=“auto” id=“nextBtn” src=“images/next1.png” alt=“” @click=“nextMusic” />

<audio id=“audio-1” ref=“audio” autoplay=“autoplay” controls src=“http://192.168.188.1:8000/nwmsucms/music/musicfile_7295697c-04a0-47a3-8b74-b299192a86b6.mp3”

@pause=“onPause”

@play=“onPlay”

@timeupdate=“onTimeupdate”

@loadedmetadata=“onLoadedmetadata”

@ended=“nextMusic”>

仿网易音乐VUE项目 ## 功能特性 1. 登录 2. 刷新登录 3. 发送验证码 4. 校验验证码 5. 注册(修改密码) 6. 获取用户信息 , 歌单,收藏,mv, dj 数量 7. 获取用户歌单 8. 获取用户电台 9. 获取用户关注列表 10. 获取用户粉丝列表 11. 获取用户动态 12. 获取用户播放记录 13. 获取精品歌单 14. 获取歌单详情 15. 搜索 16. 搜索建议 17. 获取歌词 18. 歌曲评论 19. 收藏单曲到歌单 20. 专辑评论 21. 歌单评论 22. mv 评论 23. 电台节目评论 24. banner 25. 获取歌曲详情 26. 获取专辑内容 27. 获取歌手单曲 28. 获取歌手 mv 29. 获取歌手专辑 30. 获取歌手描述 31. 获取相似歌手 32. 获取相似歌单 33. 相似 mv 34. 获取相似音乐 35. 获取最近 5 个听了这首歌的用户 36. 获取每日推荐歌单 37. 获取每日推荐歌曲 38. 私人 FM 39. 签到 40. 喜欢音乐 41. 垃圾桶 42. 歌单 ( 网友精选碟 ) 43. 新碟上架 44. 热门歌手 45. 最新 mv 46. 推荐 mv 47. 推荐歌单 48. 推荐新音乐 49. 推荐电台 50. 推荐节目 51. 独家放送 52. mv 排行 53. 获取 mv 数据 54. 播放 mv/视频 55. 排行榜 56. 歌手榜 57. 云盘 58. 电台 - 推荐 59. 电台 - 分类 60. 电台 - 分类推荐 61. 电台 - 订阅 62. 电台 - 详情 63. 电台 - 节目 64. 给评论点赞 65. 获取动态 66. 热搜列表(简略) 67. 发送私信 68. 发送私信歌单 69. 新建歌单 70. 收藏/取消收藏歌单 71. 歌单分类 72. 收藏的歌手列表 73. 订阅的电台列表 74. 相关歌单推荐 75. 付费精选接口 76. 音乐是否可用检查接口 77. 登录状态 78. 获取视频播放地址 79. 发送/删除评论 80. 热门评论 81. 视频评论 82. 退出登录 83. 所有榜单 84. 所有榜单内容摘要 85. 收藏视频 86. 收藏 MV 87. 视频详情 88. 相关视频 89. 关注用户 90. 新歌速递 91. 喜欢音乐列表(无序) 92. 收藏的 MV 列表 93. 获取最新专辑 94. 听歌打卡 95. 获取视频标签/分类下的视频 96. 已收藏专辑列表 97. 获取动态评论 98. 歌单收藏者列表 99. 云盘歌曲删除 100. 热门话题 101. 电台 - 推荐类型 102. 电台 - 非热门类型 103. 电台 - 今日优选 104. 心动模式/智能播放 105. 转发动态 106. 删除动态 107. 分享歌曲、歌单、mv、电台、电台节目到动态 108. 通知-私信 109. 通知-评论 110. 通知-@我 111. 通知-通知 112. 设置 113. 云盘数据详情 114. 私信内容 115. 我的数字专辑 116. batch批量请求接口 117. 获取视频标签列表 118. 全部mv 119. 网易出品mv 120. 收藏/取消收藏专辑 121. 专辑动态信息 122. 热搜列表(详细) 123. 更换绑定手机 124. 检测手机号码是否已注册 125. 初始化昵称 126. 更新歌单描述 127. 更新歌单名 128. 更新歌单标签 129. 默认搜索关键词 130. 删除歌单 131. 电台banner 132. 用户电台 133. 热门电台 134. 电台 - 节目详情 135. 电台 - 节目榜 136. 电台 - 新晋电台榜/热门电台榜 137. 类别热门电台 138. 云村热评 139. 电台24小时节目榜 140. 电台24小时主播榜 141. 电台最热主播榜 142. 电台主播新人榜 143. 电台付费精品榜 144. 歌手热门50首歌曲 145. 购买数字专辑 146. 获取 mv 点赞转发评论数数据 147. 获取视频点赞转发评论数数据 148. 调整歌单顺序 149. 调整歌曲顺序 150. 独家放送列表 151. 获取推荐视频 152. 获取视频分类列表 153. 获取全部视频列表接口 154. 获取历史日推可用日期列表 155. 获取历史日推详细数据 156. 国家编码列表 157. 首页-发现 158. 首页-发现-圆形图标入口列表 159. 数字专辑-全部新碟 160. 数字专辑-热门新碟 161. 数字专辑&数字单曲-榜单 162. 数字专辑-语种风格馆 163. 数字专辑详情 ## 环境要求 需要 NodeJS 8.12+ 环境
抱歉,作为AI语言模型,我无法生成完整的基于Vue音乐网站代码。但是,我可以提供一些基本的Vue代码示例,以及一些建议来帮助您开始创建一个基于Vue音乐网站。 首先,您需要安装Vue.js并创建一个Vue项目。您可以使用Vue CLI来快速创建一个项目。在控制台中输入以下命令: ``` npm install -g vue-cli vue create my-music-app cd my-music-app npm run serve ``` 这将创建一个名为“my-music-app”的Vue项目,并启动开发服务器。 接下来,您需要添加一些组件和路由来构建您的音乐网站。例如,您可以创建一个名为“MusicPlayer”的组件来显示音乐播放器,并将其添加到主页中。您还可以创建一个名为“Album”的组件来显示音乐专辑,并将其添加到路由中。 以下是一个简单的MusicPlayer组件示例: ```html <template> <div class="music-player"> <audio ref="audio" :src="currentTrack" @ended="playNext"></audio> <div class="controls"> <button @click="playPrev">Prev</button> <button @click="togglePlay">{{ playing ? 'Pause' : 'Play' }}</button> <button @click="playNext">Next</button> </div> <div class="track-info"> <h3>{{ currentTrack.title }}</h3> <p>{{ currentTrack.artist }}</p> </div> </div> </template> <script> export default { data() { return { playing: false, tracks: [ { title: 'Song 1', artist: 'Artist 1', src: 'https://example.com/song1.mp3' }, { title: 'Song 2', artist: 'Artist 2', src: 'https://example.com/song2.mp3' }, // Add more songs here ], currentTrackIndex: 0 }; }, computed: { currentTrack() { return this.tracks[this.currentTrackIndex]; } }, methods: { togglePlay() { this.playing = !this.playing; this.playing ? this.$refs.audio.play() : this.$refs.audio.pause(); }, playPrev() { this.currentTrackIndex = (this.currentTrackIndex - 1 + this.tracks.length) % this.tracks.length; this.playing = true; this.$refs.audio.load(); this.$refs.audio.play(); }, playNext() { this.currentTrackIndex = (this.currentTrackIndex + 1) % this.tracks.length; this.playing = true; this.$refs.audio.load(); this.$refs.audio.play(); } } }; </script> <style> .music-player { display: flex; flex-direction: column; align-items: center; } .controls { display: flex; justify-content: space-between; width: 200px; } .track-info { text-align: center; margin-top: 20px; } </style> ``` 您可以在App.vue文件中引入该组件并将其添加到主页中: ```html <template> <div id="app"> <router-view /> <MusicPlayer /> </div> </template> <script> import MusicPlayer from './components/MusicPlayer.vue'; export default { components: { MusicPlayer } }; </script> ``` 接下来,您需要创建一个名为“Album”的组件来显示音乐专辑。您可以使用Vue Router来创建一个名为“/album/:id”的路由,其中:id是专辑的唯一标识符。以下是一个简单的Album组件示例: ```html <template> <div class="album"> <h1>{{ album.title }}</h1> <p>{{ album.artist }}</p> <ul> <li v-for="track in album.tracks" :key="track.id"> {{ track.title }} </li> </ul> </div> </template> <script> export default { data() { return { album: { id: 'album-1', title: 'Album 1', artist: 'Artist 1', tracks: [ { id: 'track-1', title: 'Song 1', src: 'https://example.com/song1.mp3' }, { id: 'track-2', title: 'Song 2', src: 'https://example.com/song2.mp3' } // Add more tracks here ] } }; } }; </script> <style> .album { text-align: center; } </style> ``` 您可以在路由器中添加一个名为“album”的路由,并在Album组件中使用$route.params.id来获取当前专辑的ID: ```js import Vue from 'vue'; import VueRouter from 'vue-router'; import Album from './components/Album.vue'; Vue.use(VueRouter); const routes = [ { path: '/album/:id', component: Album } ]; const router = new VueRouter({ routes }); export default router; ``` 最后,您需要将路由器添加到Vue实例中: ```js import Vue from 'vue'; import App from './App.vue'; import router from './router'; new Vue({ router, render: h => h(App) }).$mount('#app'); ``` 这只是一个简单的示例,您可以根据需要添加更多组件和路由。您还可以使用Vue插件来添加更多功能,例如音乐搜索,播放列表等等。祝您好运!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值