佛山公司网站建设,做网站公司在深圳,在哪个网站可以做外单衣服,番禺网站建设效果Vue试听本地磁盘的音频 问题描述#xff1a; 项目中涉及到一个报警声音选择#xff0c; 有一个试听的功能#xff0c; 试听后觉得可以才把file文件传给服务端#xff0c;需要前端自己实现试听本地磁盘的音频#xff1b; 主要代码如下#xff1a;
templatedi…Vue试听本地磁盘的音频 问题描述 项目中涉及到一个报警声音选择 有一个试听的功能 试听后觉得可以才把file文件传给服务端需要前端自己实现试听本地磁盘的音频 主要代码如下
templatedivinputtypefilereffileInputchangehandleFileChangeaudio refaudioPlayer/audiobutton clickplayAudio播放音频/button/div
/template
script
export default {data() {return {audioPath: ,};},mounted() {},methods: {handleFileChange() {const file this.$refs.fileInput.files[0];console.log(file);this.audioPath URL.createObjectURL(file);console.log(this.audioPath);},playAudio() {const audio this.$refs.audioPlayer;audio.src this.audioPath;audio.play();},},
};
/script
style langcss scoped
/style核心就是利用 URL.createObjectURL将文件传化成一个可播放的url路径