一、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()
}