vue audio音频播放

1、audio 常用标签属性

在audio标签中存在如下属性：

autoplay：是否音频在就绪后马上播放。

controls：是否向用户显示控件，比如播放按钮。

loop：是否音频结束时重新开始播放。

preload：是否音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。

src：要播放的音频的 URL。

HTML5 audio支持的音频格式有wav，mp3和ogg格式。

ogg：一种新的音频压缩格式，是完全免费、开放和没有专利限制的。

mp3：是一种音频压缩技术。它被设计用来大幅度地降低音频数据量。

wav：为微软公司开发的一种声音文件格式，声音文件质量和CD相差无几。

标签是的一个子标签，作用就是用来引入多个音频，浏览器会选择一个支持的音频格式进行加载，对于不支持标签的浏览器，元素也可以作为浏览器不识别的内容加入到文档中。当有多个标签时，默认播放第一个标签。

标签添加完毕以后，就是编写触发事件了。如今如Chrome之类的浏览器，默认情况下，声音自动播放内容会阻止。经过测试，静音的自动播放内容仍会自动播放。使用声音自动播放内容，无论是否具有可见的控件，以及是否设置为循环播放，都不会开始播放。所以我们需要在事件中主动播放音频。

	<audio 
	ref="audio" 
	class="aud"
	autoplay //自动播放 
 	loop //循环播放 
 	@pause="onPause" // 当音频暂停
    @play="onPlay"   // 当音频播放
    @timeupdate="onTimeupdate"  // 当timeupdate事件大概每秒一次，用来更新音频流的当前播放时间
  @loadedmetadata="onLoadedmetadata" // 当加载语音流元数据完成后，会触发该事件的回调函数，语音元数据主要是语音的长度之类的数据
 	>
    <source src="../static/audio/pojun1.mp3" />
  </audio>

2、标签中常用的控制函数

标签中的控制函数说明：

load()：加载音频、视频软件，通常不必调用，除非是动态生成的元素，用来在播放前预加载

play()：加载并播放音频、视频文件，除非文件已经暂停在其他位置，否则默认重头开始播放

pause()：暂停处于播放状态的音频、视频文件

loadedmetadata()： 当加载语音流元数据完成后，会触发该事件的回调函数 ，语音元数据主要是语音的长度之类的数据

3、简单播放示例

<template>
  <button class="butt" @click="openaudio>确认</button>
  <audio ref="audio" class="aud">
    <source src="../static/audio/pojun1.mp3" />
  </audio>
</template>
<script>
export default {
  data() {
    return {
      mp3url: "",
    };
  },
  name: "Audio",
  components: {},
  methods: {
    openaudio() {
      let music1 = new Audio();
      music1 = require("../static/audio/pojun1.mp3");
      this.$refs.audio.src = music1;
      this.$refs.audio.play();
    },
  },
};
</script>
<style scoped>
.butt {
  font-size: 60px;
  width: 300px;
  height: 200px;
  border-radius: 10px;
  border-color: rgb(127, 204, 204);
}
.butt:hover {
  background: yellow;
}
</style>

4、audio获取当前播放时间

在dom挂载完毕后访问currentTime属性获得，通过timeupdate钩子可实时监控

5、audio 获取媒体总时长

在canplay（浏览器可以开始播放该音视频）钩子函数回调中访问duration属性可获得（注：在dom挂载完直接获取duration会返回NaN）

6、audio的方法

addTextTrack() 为音视频加入一个新的文本轨迹

canPlayType() 检查指定的音视频格式是否得到支持

load() 重新加载音视频标签

play() 播放音视频

pause() 暂停播放当前的音视频

7、audio的属性

audioTracks 返回可用的音轨列表（MultipleTrackList对象）

autoplay 媒体加载后自动播放

buffered 返回缓冲部件的时间范围(TimeRanges对象)

controller 返回当前的媒体控制器（MediaController对象）

controls 显示播控控件

crossOrigin CORS设置

currentSrc 返回当前媒体的URL

currentTime 当前播放的时间，单位秒

defaultMuted 缺省是否静音

defaultPlaybackRate 播控的缺省倍速

duration 返回媒体的播放总时长，单位秒

ended 返回当前播放是否结束标志

error 返回当前播放的错误状态

initialTime 返回初始播放的位置

loop 是否循环播放

mediaGroup 当前音视频所属媒体组 (用来链接多个音视频标签)

muted 是否静音

networkState 返回当前网络状态

paused 是否暂停

playbackRate 播放的倍速

played 当前播放部件已经播放的时间范围(TimeRanges对象)

preload 页面加载时是否同时加载音视频

readyState 返回当前的准备状态 {

0: HAVE_NOTHING 没有准备就绪的状态1: HAVE_METADATA 关于音频就绪的元数据2: HAVE_CURRENT_DATA 当前可用，但下一帧不确定3: HAVE_FUTURE_DATA 当前和下一帧可用
4: HAVE_ENOUGH_DATA 有足够的数据支持播放
}，

seekable 返回当前可跳转部件的时间范围(TimeRanges对象)

seeking 返回用户是否做了跳转操作

src 当前音视频源的URL

startOffsetTime 返回当前的时间偏移(Date对象)

textTracks 返回可用的文本轨迹(TextTrackList对象)

videoTracks 返回可用的视频轨迹(VideoTrackList对象)

volume 音量值

8、audio的钩子

abort 当音视频加载被异常终止时产生该事件

canplay 当浏览器可以开始播放该音视频时产生该事件

canplaythrough 当浏览器可以开始播放该音视频到结束而无需因缓冲而停止时产生该事件

durationchange 当媒体的总时长改变时产生该事件

emptied 当前播放列表为空时产生该事件

ended 当前播放列表结束时产生该事件

error 当加载媒体发生错误时产生该事件

loadeddata 当加载媒体数据时产生该事件

loadedmetadata 当收到总时长，分辨率和字轨等metadata时产生该事件

loadstart 当开始查找媒体数据时产生该事件

pause 当媒体暂停时产生该事件

play 当媒体播放时产生该事件

playing 当媒体从因缓冲而引起的暂停和停止恢复到播放时产生该事件

progress 当获取到媒体数据时产生该事件

ratechange 当播放倍数改变时产生该事件

seeked 当用户完成跳转时产生该事件

seeking 当用户正执行跳转时操作的时候产生该事件

stalled 当试图获取媒体数据，但数据还不可用时产生该事件

suspend 当获取不到数据时产生该事件

timeupdate 当前播放位置发生改变时产生该事件

volumechange 当前音量发生改变时产生该事件

waiting 当视频因缓冲下一帧而停止时产生该事件