“This is the fifth day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

preface

Today I want to share a simple requirement that I encountered during my project:

  • Display the progress bar in real time while audio is playing
  • You can adjust the current audio speed in real time, and the speed of the progress bar changes accordingly
  • Adjust the volume of current audio in real time

The effect is as follows:

Project background

  • Vue2 buckets
  • Element UI

The specific implementation

1. The train of thought

The DOM attribute of the Audio tag is used to implement the function (address) :

  • Audio.duration: Returns the length of the audio in seconds.
  • Audio.playbackRate: Sets or returns the speed of audio playback.
  • Audio.volume: Sets or returns the volume of audio.

Progress bar function: mainly used CSS width percentage property: width:80%; PlaybackRate: used to control the speed of playback and the speed of the progress bar; Volume adjustment: Mainly used in Audio. Volume: used to set the volume.

2. Function realization

  • Progress bar function

Here, the timer is mainly used to calculate the percentage of the current time and total time in each second, so as to display the position of the progress bar in each second. After obtaining the percentage of the current time in each second, we can easily implement the function of the progress bar by using the percentage property of width in CSS.

<template> <div> <p> <el-button @click="play"> Play </el-button> </p> <audio ref="audioPlayer" :src="src" ></audio> <div  class="progress-box"> <div id="bar" :style="`width:${barWidth}%; `"></div> </div> <p style="color: #ccc">{{ `${currentTimeText} / ${audioTimeText}`}}</p> </div> </template> <script> export default { name: 'MyEditor', props: [" SRC "], data() {return {timer: null,// currentTime: 0,// currentTime: 0,// currentTime: 0}; }, watch: {// mounted() {// let vm = this; let passage_audio = this.$refs.audioPlayer; passage_audio.load(); passage_audio.oncanplay = function() { vm.audioTime = Math.round(passage_audio.duration); }; }, computed: {// Total generated time audioTimeText(){return this.gettimeText (this.audiotime); }, // currentTimeText(){return this.getTimeText(this.currentTime); }, barWidth() {return (this.currentTime/this.audiotime) * 100; }}, methods: {// Click the play button to move the progress bar play() {// When you click the play button, it will check whether there is currently running timer, if so, it will be cleared first. if (this.timer) { clearInterval(this.timer); } // reset the currentTime to 0 this.currentTime = 0; Let passage_audio = this.$refs.audioPlayer; passage_audio.play(); let vm = this; // Set timer, each second the current time increases; this.timer = window.setInterval(function() { vm.currentTime = vm.currentTime + 1; // When the current number of seconds exceeds or equals the total time, the timer is cleared; if (vm.currentTime >= vm.audioTime) { vm.currentTime = vm.audioTime; clearInterval(vm.timer); }}, 1000); GetTimeText (seconds) {let minute; let second; minute = Math.floor(seconds / 60); second = Math.floor(seconds) - minute * 60; If (minute <= 9) minute = "0" + minute; if (second <= 9) second = "0" + second; return minute + ":" + second; } } } </script> <style scoped> .progress-box{ border-radius: 5px; background-color: #ccc; height: 50px; padding: 3px 4px; min-width: 500px; } #bar { background: #41b883; height: 100%; border-radius: 3px; // The progress bar animation, plus after the animation will be smooth transition: 1s linear; } </style>Copy the code

Through the above steps we can perfectly achieve the play progress bar to follow the function, the next is to achieve the double speed function.

  • Times the speed function



So let’s just use thisElement UItheel-dropdownComponent to implement: in variablesspeedArrayTo define the required multiple speed value, and then it will trigger each time the speed value is selected@commandIn thechangeSpeedMethods to modifyAudio.playbackRateProperty value, thus achieving the purpose of modifying the audio speed.

<el-dropdown size="small" @command="changeSpeed" style="margin: 0 20px"> <span class="audio-speed"> <el-button>Speed: <b>{{ speed }} X</b></el-button> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item v-for="(item, index) in speedArray" :key="index" :command="item" > {{ item }} X </el-dropdown-item> </el-dropdown-menu> </el-dropdown> <script> export default {data() {return {speed: 1, speedArray: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2],}}, methods: { changeSpeed(command) { let audioPlayer = this.$refs.audioPlayer; audioPlayer.playbackRate = command; this.speed = command; }, } } </script>Copy the code

After changing the audio speed, we also want to change the speed of the progress bar, so we can just change the play() method above a bit:

If (this.timer) {clearInterval(this.timer); if (this.timer) {clearInterval(this.timer);  } this.currentTime = 0; let passage_audio = this.$refs.audioPlayer; Passage_audio. PlaybackRate = this.speed; passage_audio. passage_audio.play(); let vm = this; This.timer = window.setInterval(function() {// Set the progress bar speed vm.currentTime = vm.currentTime + 1 * vm.speed; if (vm.currentTime >= vm.audioTime) { vm.currentTime = vm.audioTime; clearInterval(vm.timer); }}, 1000); }Copy the code

Passage_audio. PlaybackRate = this.speed; passage_audio. PlaybackRate = this. CurrentTime = vm.currentTime + 1 * vm.speed; In this way, progress bar speed and audio speed can be achieved together;

  • The function of adjusting the volume



That’s a pretty simple thing to implement, and we’re using it hereElement UItheel-sliderComponent to implement swiping to change volume.

<el-popover placement="bottom" width="100" trigger="hover">
    <div class="block">
      <span class="demonstration">Vol</span>
      <el-slider v-model="vol"></el-slider>
    </div>
    <el-button slot="reference">Volume</el-button>
</el-popover>
Copy the code

We use the watch property to monitor the vol value changes, and use the Audio. Volume property to change the volume of the Audio

watch: { vol() { let audioPlayer = this.$refs.audioPlayer; audioPlayer.volume = this.vol / 100; }},Copy the code

summary

This small function to do or quite practical, I hope you can bring a little help. Thanks – (· ω ·) Blue