Git 高阶函数 Markdown 海思 function shell msbuild insert swiftui 八大员 管理后台ui sql视频教程 两个正态分布相乘 axure组件库下载 java两个数组合并 html下拉框默认选中 完全去vm去虚拟化工具 python抛出异常 java数据库连接 java发邮件 java初学者 java文档 java中class java版本查看 java接口开发 java字符 登录界面html 幽城幻剑录五内 html5网页制作 彻底删除mysql iar下载 ABViewer dnf瞎子传说套选择 hyqihei ps调整边缘抠头发丝 微信公众号点餐系统 跑马灯动态壁纸 pr时间轴 网络电子书 360越狱版
当前位置: 首页 > 学习教程  > 编程语言

vue中audio常用监听器与navigator.mediaMetadata的使用

2020/8/31 14:01:21 文章标签:

Audio

初始化 Audio
	let audio = new Audio(audioPath);
	audio.load();
播放
// 当缓冲至能播放时触发
audio.addEventListener('canplay', () => {
		// 设定 100% 音量
        audio.volume = 1;
        // 开始播放
        audio.play();
        // 添加至播放列表,方便管理,例:
        this.playList.add(audio);
      });
监听事件

常用事件:

// 播放结束触发
audio.addEventListener('ended', () => {
	// 是否循环播放,例:
	if (this.repeat) {
	  audio.play();
	  // 是否随机播放,例:
	} else if (this.random) {
	  this.randomVoicePlay();
	} else {
	  // 播放结束处理:在播放列表内清除此 audio 元素,例:
	  this.playList.delete(audio);
	}
});

// 暂停播放触发
audio.addEventListener('pause', () => {
	// 从播放列表清除本 audio 元素,例:
	this.playList.delete(audio);
});

// 正在播放
audio.addEventListener('play', () => {
	// 监听点击暂停 audio
	audio.pause();
});
统一管理

使用总线可以实现统一音频管理。

建立总线 bus.js

import Vue from 'vue';

const eventBus = {};

eventBus.install = function (Vue) {
  Vue.prototype.$bus = new Vue();
};

Vue.use(eventBus);

在触发播放的函数内 this.$bus.$on() 监听总线事件即可。

外部使用 this.$bus.$emit() 进行统一音频管理。

音频进度条
// 计算 audio 的播放百分比情况
let prog = Number(((audio.currentTime / audio.duration) * 100).toFixed(2));
if (prog !== Infinity && !isNaN(prog)) {
	// ...
}

navigator.mediaMetadata

mediaMetadata 可以告诉浏览器当前有媒体正在播放,从而在浏览器上显示播放器(当有媒体播放时, Chrome 在右上角显示)。

在播放器上:

  • 可以进行切换上下首的操作,暂停操作。
  • 显示标题、专辑图片等信息。
初始化

我们应该在页面加载就把上下首,暂停的回调函数写好:

mounted() {
	// 有的浏览器不支持 mediaSession
    if ('mediaSession' in navigator) {
      navigator.mediaSession.setActionHandler('nexttrack', () => {
        // 下一首
      });
      navigator.mediaSession.setActionHandler('previoustrack', () => {
        // 上一首
      });
      
      navigator.mediaSession.setActionHandler('pause', () => {
        // 暂停
        // 使浏览器暂停播放
        navigator.mediaSession.playbackState = 'paused';
      });
    }
  },
建立媒体信息

在触发播放音频函数内加载媒体元信息:

if ('mediaSession' in navigator){
  navigator.mediaSession.metadata = new MediaMetadata({
    title: "Podcast Episode Title",
    artist: "Podcast Host",
    album: "Podcast Name",
    artwork: [{src: "podcast.jpg", sizes: '128x128', type: 'image/jpeg' }]
  });
  // 使浏览器开始播放
  navigator.mediaSession.playbackState = 'playing';
}

附:

  • MDN:MediaSession
  • MDN:MediaSession.playbackState

流程

进行音频播放的流程应该是:

	// 页面 dom 加载完后的生命周期函数
	mounted() {
		/* 
		初始化 navigator.mediaSession 的回调事件(可选)
		*/
	}
	
	// 触发播放的函数
	play() {
		/*
		1. 初始化音频
		2. 添加媒体元信息(可选)
		3. 监听音频事件
		*/
	}

本文链接: http://www.dtmao.cc/news_show_150148.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?