在VUE中播放音频（audio介绍与使用）

一、audio标签简介

在HTML中我们可以使用audio标签播放音频，就像这样:

<audio controls>
  <source src="音频位置">
</audio>

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
muted	muted	如果出现该属性，则音频输出为静音。
preload	auto metadata none	规定当网页加载时，音频是否默认被加载以及如何被加载。
src	URL	规定音频文件的 URL。

上表抄自菜鸟教程，我们可以在audio标签中加入相应的属性来达到对应的效果。

同时，在HTML5中新增了audio对象，代表audio标签，让我们可以在JS中去控制audio。

它的属性和方法很多，见下表（同样式抄自菜鸟教程）

表1:audio属性

属性	描述
audioTracks	返回表示可用音频轨道的 AudioTrackList 对象
autoplay	设置或返回是否在加载完成后随即播放音频
buffered	返回表示音频已缓冲部分的 TimeRanges 对象
controller	返回表示音频当前媒体控制器的 MediaController 对象
controls	设置或返回音频是否显示控件（比如播放/暂停等）
crossOrigin	设置或返回音频的 CORS 设置
currentSrc	回当前音频的 URL
currentTime	设置或返回音频中的当前播放位置（以秒计）
defaultMuted	设置或返回音频默认是否静音
defaultPlaybackRate	设置或返回音频的默认播放速度
duration	返回当前音频的长度（以秒计）
ended	返回音频的播放是否已结束
error	返回表示音频错误状态的 MediaError 对象
loop	设置或返回音频是否应在结束时重新播放
mediaGroup	设置或返回音频所属的组合（用于连接多个音频元素）
muted	设置或返回音频是否静音
networkState	返回音频的当前网络状态
paused	设置或返回音频是否暂停
playbackRate	设置或返回音频播放的速度
played	返回表示音频已播放部分的 TimeRanges 对象
preload	设置或返回音频是否应该在页面加载后进行加载
readyState	返回音频当前的就绪状态
seekable	返回表示音频可寻址部分的 TimeRanges 对象
seeking	返回用户是否正在音频中进行查找
src	设置或返回音频元素的当前来源
textTracks	返回表示可用文本轨道的 TextTrackList 对象
volume	设置或返回音频的音量

表2：audio方法

方法	描述
addTextTrack()	在音频中添加一个新的文本轨道
canPlayType()	检查浏览器是否可以播放指定的音频类型
fastSeek()	在音频播放器中指定播放时间。
getStartDate()	返回一个新的Date对象，表示当前时间轴偏移量
load()	重新加载音频元素
play()	开始播放音频
pause()	暂停当前播放的音频

使用也很简单：

1.获取dom

2.操作

二、在VUE2中播放音频

1.直接使用AUDIO标签进行音频播放

 <audio controls ref="audio" class="aud">
    <source src="../static/audio/pojun1.mp3" />
  </audio>

2.使用JS播放音频，获取dom，使用play()

<template>
  <button class="butt" @click="bofang1">确认</button>
  <audio ref="audio" class="aud">
    <source src="../static/audio/pojun1.mp3" />
  </audio>
</template>
<script>
export default {
  data() {
    return {
      mp3url: "",
    }
  },
  name: "YinYue",
  components: {},
  methods: {
    bofang1() {
      let music1 = new Audio();
      music1 = require("../static/audio/pojun1.mp3");
      this.$refs.audio.src = music1;
      this.$refs.audio.play();
    },
  },
};
</script>

三、在vue3中播放音频

在vue3中加入了setup()所以获取虚拟dom稍稍有所不同。

<template>
  <audio ref="audio">
    <source src="../assets/audio/开头.mp3" type="audio/ogg" />
  </audio>
  <button @click="clickAudio()"></button>
</template>
<script setup lang="ts">
import { ref } from "vue";
const audio = ref();
const plays = () => {
  if (audio.value) {
    audio.value.play();
  }
};
const clickAudio = () => {
  plays();
};
</script>

四、在uniapp中播放音频

const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.src = '音频地址';
// 关闭自动播放
innerAudioContext.autoplay = false;
	const Click= () => {
		innerAudioContext.stop()
		innerAudioContext.play()
}