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. 监听音频事件
		*/
	}