uniapp怎么使用audio标签

1. 简介

audio标签是HTML5中新增加的一个标签，它可以让开发者很方便地在网页中嵌入音频，与视频标签一样都是用于音频、视频的播放。使用audio标签可以避免通过Javascript API调用音频，外加HTML5音频元素拥有兼容性强，音质清晰等优点。

2. 基本用法

audio标签的基本用法非常简单。

<audio src="audio.mp3" controls="controls"> </audio>

其中，src属性指定音频文件的地址，controls属性指定是否显示控制面板。上述代码中，控制面板会显示出来，包括音量、进度条和播放/暂停按键等。如果不想显示控制面板，则可以将controls属性的值设为false。

2.1 播放音频

下面是一个简单的例子，实现在点击播放按钮后，播放一首音乐。

<button @click="playAudio">播放</button>
<audio ref="audio" src="./music.mp3"></audio>
<script>
export default {
    methods: {
        playAudio() {
            this.$refs.audio.play();
        },
    },
};
</script>

在上面的例子中，当点击播放按钮时，会调用playAudio方法，在playAudio方法中，通过$refs引用audio标签，并调用它的play()方法来播放音频。

2.2 暂停音频

停止播放音频也是非常简单的，只需要调用pause()方法即可。

<button @click="pauseAudio">暂停</button>
<audio ref="audio" src="./music.mp3"></audio>
<script>
export default {
    methods: {
        pauseAudio() {
            this.$refs.audio.pause();
        },
    },
};
</script>

在上面的例子中，当点击暂停按钮时，会调用pauseAudio方法，在pauseAudio方法中，通过$refs引用audio标签，并调用它的pause()方法来暂停音频。

2.3 获取音乐时长

有时我们需要知道某首音乐的时长，以便于进行相关的控制。可以通过duration属性来获取音频的时长，单位为秒。

<span>音乐时长：{{ audioLength }}秒</span>
<audio ref="audio" src="./music.mp3"></audio>
export default {
    computed: {
        audioLength() {
            return parseInt(this.$refs.audio.duration);
        },
    },
};
</script>

在上面的例子中，通过computed计算属性来获取音乐的时长，duration属性返回音频文件的时长，单位为秒。

2.4 音量控制

音量的控制可以通过volume属性来实现。volume属性的值为0-1之间的值，0表示静音，1表示最大音量，0.5表示一半音量。

<button @click="setVolume">设置音量为50%</button>
<audio ref="audio" src="./music.mp3"></audio>
export default {
    methods: {
        setVolume() {
            this.$refs.audio.volume = 0.5;
        },
    },
};
</script>

在上面的例子中，点击设置音量为50%按钮后，会调用setVolume方法，通过$refs引用audio标签，并将volume属性的值设置为0.5，即50%音量。

2.5 完整的控制面板

可以通过自定义控制面板来实现更加自由的控制。

<template>
   <div>
        <span>{{ currentTime }}s / {{ audioLength }}s</span>
        <input type="range" v-model="value" max="100" @change="changeValue">
        <button @click="playPauseBtn">{{ playPauseBtnText }}</button>
    </div>
</template>
<audio ref="audio" src="./music.mp3" @timeupdate="updateTime"></audio>
<style scoped>
input[type='range'] {
  -webkit-appearance: none;
}
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background: #333333;
  margin-top: -5px;
}
input[type='range']::-moz-range-thumb {
  -webkit-appearance: none;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background: #333333;
  margin-top: -5px;
}
</style>
export default {
    data() {
        return {
            audioLength: 0,
            currentTime: 0,
            playPauseBtnText: '播放',
            value: 0,
        };
    },
    methods: {
        playPauseBtn() {
            if (this.playPauseBtnText === '播放') {
                this.$refs.audio.play();
                this.playPauseBtnText = '暂停';
            } else {
                this.$refs.audio.pause();
                this.playPauseBtnText = '播放';
            }
        },
        changeValue(e) {
            const val = e.target.value;
            this.$refs.audio.currentTime = (val / 100) * this.$refs.audio.duration;
        },
        updateTime() {
            const current = parseInt(this.$refs.audio.currentTime);
            if (current !== this.currentTime) {
                this.currentTime = current;
            }
            if (this.currentTime === this.audioLength) {
                this.playPauseBtnText = '播放';
            }
            this.value = (current / this.$refs.audio.duration) * 100;
        },
    },
    computed: {
        audioLength() {
            return parseInt(this.$refs.audio.duration);
        },
    },
};
</script>

在上面的例子中，自定义了一个控制面板，包括当前音乐播放的时间、进度条和播放/暂停按钮。其中，@timeupdate事件表示音乐播放过程中的事件，每秒钟触发一次。通过自定义样式美化了进度条，并在changeValue方法中设置音乐的播放时间。

3. 总结

通过上面的讲解，我们学习了audio标签的使用。audio标签不仅可以简单地播放音乐，还可以通过自定义控制面板实现更多的功能。开发者可以通过这些基本的特性，来进行更加复杂的开发。希望本文对您有所帮助。