写一个配音的vue的页面
时间: 2024-06-09 12:04:33 浏览: 15
以下是一个简单的配音页面的Vue代码示例:
```html
<template>
<div class="container">
<h1>配音页面</h1>
<div class="audio-player">
<audio ref="audioPlayer" :src="audioSrc" @ended="onAudioEnded"></audio>
<div class="audio-controls">
<button @click="playAudio"><i class="fas fa-play"></i></button>
<button @click="pauseAudio"><i class="fas fa-pause"></i></button>
<button @click="stopAudio"><i class="fas fa-stop"></i></button>
<input type="range" min="0" :max="audioDuration" v-model="audioCurrentTime">
<span>{{ formatTime(audioCurrentTime) }}</span> / <span>{{ formatTime(audioDuration) }}</span>
</div>
</div>
<div class="voice-recorder">
<button @click="startRecording"><i class="fas fa-microphone"></i></button>
<button @click="stopRecording"><i class="fas fa-stop-circle"></i></button>
<button @click="playRecording"><i class="fas fa-play-circle"></i></button>
<audio ref="recordingPlayer" :src="recordingSrc" @ended="onRecordingEnded"></audio>
</div>
</div>
</template>
<script>
export default {
data() {
return {
audioSrc: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3', // 示例音频文件链接
audioCurrentTime: 0,
audioDuration: 0,
recordingSrc: null,
isRecording: false,
recorder: null
}
},
methods: {
playAudio() {
this.$refs.audioPlayer.play()
},
pauseAudio() {
this.$refs.audioPlayer.pause()
},
stopAudio() {
this.$refs.audioPlayer.pause()
this.$refs.audioPlayer.currentTime = 0
},
onAudioEnded() {
this.$refs.audioPlayer.currentTime = 0
},
startRecording() {
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
this.recorder = new MediaRecorder(stream)
const chunks = []
this.recorder.addEventListener('dataavailable', event => chunks.push(event.data))
this.recorder.addEventListener('stop', () => {
const blob = new Blob(chunks, { type: 'audio/ogg; codecs=opus' })
this.recordingSrc = URL.createObjectURL(blob)
this.isRecording = false
})
this.recorder.start()
this.isRecording = true
})
},
stopRecording() {
this.recorder.stop()
},
playRecording() {
this.$refs.recordingPlayer.currentTime = 0
this.$refs.recordingPlayer.play()
},
onRecordingEnded() {
this.$refs.recordingPlayer.currentTime = 0
},
formatTime(time) {
const minutes = Math.floor(time / 60)
const seconds = Math.floor(time % 60)
return `${minutes}:${String(seconds).padStart(2, '0')}`
}
},
computed: {
audioDuration() {
return this.$refs.audioPlayer.duration
}
}
}
</script>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
}
.audio-player {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 30px;
}
.audio-controls {
display: flex;
align-items: center;
margin-top: 10px;
}
.audio-controls button {
font-size: 24px;
margin-right: 10px;
}
.voice-recorder button {
font-size: 24px;
margin-right: 10px;
}
</style>
```
这个页面包含了一个音频播放器和一个录音器。播放器包含了播放、暂停、停止、进度条等控件,录音器包含了开始录音、停止录音、播放录音等控件。你可以根据自己的需求进行修改和扩展。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)