一、使用AUDIO标签进行音频播放
只需要在组件中这样写就行了
? <audio controls ref="audio" class="aud">
? ? <source src="../static/audio/pojun1.mp3" />
? </audio>
在html中可以直接将src写在audio中,但是在VUE3的组件中会报错，所以将src写在了source中。
因为在audio标签中写入了controls，所以会出现以下图案：
只需要点击它，就可以播放路径中的音频了。
?
二.点击按钮播放音频
2.1先随便写个按钮，就像这个样子：
<button class="butt" @click="bofang1">确认</button>
在按钮中定义了一个bofang1
2.2接着，再写一个audio标签。
? <audio controls ref="audio" class="aud">
? ? <source :src="mp3url" />
? </audio>
因为要用按钮实现播放功能，并不需要那个播放界面，所以和一相比不在audio标签使用 controls。src则在JS中引入。
JS代码：
<script>
export default {
? data() {
? ? return {
? ? ? mp3url: "",
? ? };
? },
? name: "YinYue",
? components: {},
? methods: {
? ? bofang1() {
? ? ? let music1 = new Audio(); //建立一个music1对象
? ? ? music1 = require("../static/audio/pojun1.mp3");//通过require引入音频
? ? ? this.$refs.audio.src = music1;//此处的audio为代码ref="audio"中的audio
? ? ? this.$refs.audio.play();//play()为播放函数
? ? },
? },
};
</script>
之后点击按钮，就可以播放音频了。
全部代码如下：
<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>
<style scoped>
.butt {
? font-size: 60px;
? width: 300px;
? height: 200px;
? border-radius: 10px;
? border-color: rgb(127, 204, 204);
}
.butt:hover {
? background: yellow;
}
?
</style>
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
