最近闲暇时在使用Electron做桌面端应用(仿网易云桌面客户端)于是有接触到audio。由于很久没有写过这标签了 特来此详细做个笔记,方便自己以后查阅。
先放一个auido标签 让他动起来
- <audio
- :src="https://music.163.com/song/media/outer/url?id=65847.mp3"
- controls
- ></audio>
-
Audio 对象属性
属性 | 描述 | 博主提示 |
---|---|---|
audioTracks | 返回表示可用音频轨道的 AudioTrackList 对象。 | 任何主流浏览器都不支持 audioTracks 属性。 |
autoplay | 设置或返回是否在就绪(加载完成)后随即播放音频。 | 如果设置了该属性,音频(加载完成)将自动播放。 |
buffered | 返回表示音频已缓冲部分的 TimeRanges 对象。 | |
controller | 返回表示音频当前媒体控制器的 MediaController 对象。 | 目前没有主流浏览器支持 controller 属性。 |
controls | 设置或返回音频是否应该显示控件(比如播放/暂停等)。 | 设置就可以显示控件,但是每个浏览器都有自己显示auido的样式 |
crossOrigin | 设置或返回音频的 CORS 设置。 | 这个确实没太懂哈 按常理,跨域在头部设置或者config配置 或者后端配置 |
currentSrc | 返回当前音频的 URL。 | 只读 |
currentTime | 设置或返回音频中的当前播放位置(以秒计)。 | 可写可读 |
defaultMuted | 设置或返回音频默认是否静音。 | 可写可读 |
defaultPlaybackRate | 设置或返回音频的默认播放速度。 | 可写可读 |
duration | 返回音频的长度(以秒计)。 | 只读 |
ended | 返回音频的播放是否已结束。 | 只读 |
error | 返回表示音频错误状态的 MediaError 对象。 | |
loop | 设置或返回音频是否应在结束时再次播放。 | 可写可读 |
mediaGroup | 设置或返回音频所属媒介组合的名称。 | 可写可读 |
muted | 设置或返回是否关闭声音。 | 可写可读 |
networkState | 返回音频的当前网络状态。 | 0 - 音频尚未初始化;1 - 音频是活动的且已选取资源,但并未使用网络2 - 浏览器正在下载数据;3 - 未找到音频来源 |
paused | 设置或返回音频是否暂停。 | 只读 |
playbackRate | 设置或返回音频播放的速度。 | 可写可读,例值:1.0 正常速度;0.5 半速(更慢);2.0 倍速(更快);-1.0 向后;正常速度-0.5 向后半速 等 |
played | 返回表示音频已播放部分的 TimeRanges 对象。 | |
preload | 设置或返回音频的 preload 属性的值。 | 可写可读,是否在页面加载后载入音频。 |
readyState | 返回音频当前的就绪状态。 | 可写可读 |
seekable | 返回表示音频可寻址部分的 TimeRanges 对象。 | |
seeking | 返回用户当前是否正在音频中进行查找。 | |
src | 设置或返回音频的 src 属性的值。 | 可写可读 |
textTracks | 返回表示可用文本轨道的 TextTrackList 对象。 | |
volume | 设置或返回音频的音量。 | 规定音频/视频的当前音量。必须是介于 0.0 与 1.0 之间的数字。可写可读 |
Audio 对象方法
方法 | 描述 |
---|---|
addTextTrack() | 向音频添加新的文本轨道。 |
canPlayType() | 检查浏览器是否能够播放指定的音频类型。 |
fastSeek() | 在音频播放器中指定播放时间。 |
getStartDate() | 返回新的 Date 对象,表示当前时间线偏移量。 |
load() | 重新加载音频元素。 |
play() | 开始播放音频。 |
pause() | 暂停当前播放的音频。 |
template
- <div class="audio">
- <audio @ended="next(currentSongUnit.afterId)" ref="audio" @timeupdate="timeupdate"
- preload="auto" :src="audioSrc" />
- <div class="audio-btn fac">
- <!-- 上一首 -->
- <i @click="next(currentSongUnit.beforeId)"class="iconfont icon-lastSong"/>
- <!-- 播放 -->
- <i @click="play()" v-show="isPause" class="iconfont icon-play" />
- <!-- 暂停 -->
- <i @click="stop()" v-show="!isPause" class="iconfont icon-paused" />
- <!-- 下一首 -->
- <i @click="next(currentSongUnit.afterId)" class="iconfont icon-nextSong"/>
- </div>
- <div class="audio-progressBar fbc">
- <!-- 歌曲当前播放时间 -->
- <p class="start-tiem audio-tiem">{{ staratTime }}</p>
- <!-- 进度条 -->
- <div>
- <el-slider v-model="progressBarValue" :show-tooltip="false" @change="sliderChange"/>
- </div>
- <!-- 歌曲总时长 -->
- <p class="end-tiem audio-tiem">{{ allTime }}</p>
- </div>
- </div>
-
script
- #部分代码涉及接口 接口我并没有写出来 不好意思
- <script>
- import { search, getSongDetail } from '@/api/find';
- export default {
- name: 'myFooter',
-
- components: {},
-
- data() {
- return {
- audio: '',//audio的ref
- hotList: [],//歌曲完整列表
- staratTime: '00:00', //当前播放时间
- progressBarValue: 0,//进度条显示长度 默认为0 范围为0-100 使用前转换
- allTime: '00:00', //歌曲总时间
- isPause: true, //是否暂停 默认暂停
- songsIdList: [], //所有歌曲简化信息
- currentSongUnit: {}, //当前歌曲部分信息
- };
- },
-
- computed: {
- //歌曲的url
- audioSrc() {
- return `https://music.163.com/song/media/outer/url?id=${this.currentSongUnit.id}.mp3`;
- },
- },
-
- watch: {
- //当歌曲audioSrc 发生变化时 重新执行load加载歌曲及 getSongDetail获取歌曲相信信息
- audioSrc() {
- this.audio.load();
- this.getSongDetail();
- },
- },
-
- mounted() {
- this.audio = this.$refs.audio; //获取audio的ref
- this.searchMusic();
- },
-
- methods: {
- //search接口获取陈奕迅的歌单数据 重写数组 只保留id 名字 上/下首歌曲id
- async searchMusic() {
- const params = { keywords: '陈奕迅' };
- const { result } = await search(params);
- const hotList = result.songs;
- //获取上一曲下一曲id 当前歌曲id,name 重置id数组
- const songsIdList = hotList.map((item, index) => {
- const afterId = hotList[index + 1] ? hotList[index + 1].id : null;
- const beforeId = hotList[index - 1] ? hotList[index - 1].id : null;
- const arr = { id: item.id, name: item.name, afterId, beforeId };
- return arr;
- });
- this.hotList = hotList;//获取到的歌单信息
- this.songsIdList = songsIdList;//重写的数组
- this.currentSongUnit = songsIdList[0];//默认当前播放为第一条
- this.getSongDetail();//执行getSongDetail
- },
- //getSongDetail接口获取当前播放歌曲的详细信息 歌单信息内歌曲list信息不够完善
- async getSongDetail() {
- const { songs } = await getSongDetail(this.currentSongUnit.id);
- const song = songs[0];
- //处理song.ar对象内歌手大于一位时 拼接/ 例: 陈奕迅/薛之谦
- const singer = song.ar.length > 1
- ? song.ar.map((it) => it.name).join(' / ')
- : song.ar[0].name;
- this.currentSongUnit = {
- ...this.currentSongUnit,
- songName: song.name,
- songAvatar: song.al.picUrl,
- singer,
- };
- this.play();//执行play方法 播放
- },
- //下一首 上一首 播放完毕也回执行该方法
- next(id) {
- if (!id) { return false; }
- const nextList = this.songsIdList.find((it) => it.id === id);
- this.currentSongUnit = nextList;
- },
- //暂停
- stop() {
- this.audio.pause();
- this.isPause = true;
- },
- //播放 获取完整时间
- play() {
- this.allTime = this.filterDuration(this.audio.duration);
- this.audio.play();
- this.isPause = false;
- },
- //当歌曲实时播放时 获取当前播放时间 设置滚动条位置
- timeupdate() {
- this.staratTime = this.filterDuration(this.audio.currentTime);
- this.progressBarValue =
- (this.audio.currentTime / this.audio.duration) * 100;
- // console.log(this.audio.currentTime / this.audio.duration);
- },
- //拉动滚动条时候出发 松手触发
- sliderChange(e) {
- this.audio.currentTime = (e / 100) * this.audio.duration;
- },
- // 静音/禁止静音
- muted() {
- this.audio.muted = !this.audio.muted;
- },
- //转化时长显示
- filterDuration(s) {
- if (typeof s !== 'number') {
- throw new Error('传入时长需为数字类型');
- }
- let hour = Math.floor(s / 3600);
- let min = Math.floor((s % 3600) / 60);
- let sec = Math.floor(s % 60);
-
- hour = hour < 10 ? `0${hour}` : hour;
- min = min < 10 ? `0${min}` : min;
- sec = sec < 10 ? `0${sec}` : sec;
-
- return `${min}:${sec}`;
- },
- },
- };
- </script>
-