音频预览

src/icons/svg/pause.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.75098 6C8.75098 5.58579 8.41519 5.25 8.00098 5.25C7.58676 5.25 7.25098 5.58579 7.25098 6V18C7.25098 18.4142 7.58676 18.75 8.00098 18.75C8.41519 18.75 8.75098 18.4142 8.75098 18V6ZM16.749 6C16.749 5.58579 16.4132 5.25 15.999 5.25C15.5848 5.25 15.249 5.58579 15.249 6V18C15.249 18.4142 15.5848 18.75 15.999 18.75C16.4132 18.75 16.749 18.4142 16.749 18V6Z" fill="currentColor"/>
+</svg>

src/icons/svg/play.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.125 9.28798C11.3571 9.15401 11.643 9.15401 11.875 9.28798L22.375 15.3502C22.6071 15.4842 22.75 15.7318 22.75 15.9997C22.75 16.2676 22.6071 16.5152 22.375 16.6492L11.875 22.7114C11.643 22.8454 11.3571 22.8454 11.125 22.7114C10.8929 22.5774 10.75 22.3299 10.75 22.0619V9.9375C10.75 9.66955 10.8929 9.42196 11.125 9.28798ZM12.25 11.2365V20.7629L20.5 15.9997L12.25 11.2365Z" fill="currentColor"/>
+</svg>

src/views/content_manage/course_manage/CreateRecorded.vue

@@ -135,14 +135,26 @@
                                 </div>
                                 <a @click="handleDelCourseResource()"><i class="el-icon-delete"></i></a>
                             </div>
-                            
                         </el-form-item>
                         <el-form-item label="课程音频" prop="audioResource" v-else>
                             <upload :datafileList="createCourseForm.audioResource" :changeFillId="handleAvatarSuccess" :fileName="'courseAudio'" uploadType="mp3" :filleNumber="1" :showList="true" />
-                            <li v-for="(itemR,indexR) in createCourseForm.audioResource" :key="indexR">
-                                <a @click="handlePreview(itemR)"><svg-icon icon-class="mp3" class="icon-logo"></svg-icon><span>{{itemR.name}}</span></a>
-                                <i class="el-icon-delete" @click="handleDelCourseResource()"></i>
-                            </li>
+                            <ul v-if="createCourseForm.audioResource.length>0" class="resource-list">
+                                <li v-for="(itemR,indexR) in createCourseForm.audioResource" :key="indexR">
+                                    <a @click="PlayAudio">
+                                        <svg-icon icon-class="mp3" class="icon-logo"></svg-icon><span>{{itemR.name}}</span>
+                                        <i class="el-icon-loading" v-if="audio.loading"></i>
+                                        <svg-icon v-if="audio.playing&&!audio.loading" icon-class="pause" className="icon-svg"></svg-icon>
+                                        <svg-icon v-if="!audio.playing&&!audio.loading" icon-class="play" className="icon-svg"></svg-icon>
+                                        <audio
+                                            id="createRecorded"
+                                            ref="createRecorded"
+                                            :src="createCourseForm.file_url"
+                                            preload="metadata"
+                                        />
+                                    </a>
+                                    <i class="el-icon-delete" @click="handleDelCourseResource()"></i>
+                                </li>
+                            </ul>
                         </el-form-item>
                         <el-form-item label="课节信息" prop="intro">
                             <Editor
@@ -374,6 +386,13 @@ export default {
         file_preview_url: 'https://docpreview.utschool.cn',
         loading: false,
         player: null,
+        audio: {
+            // 该字段是音频是否处于播放状态的属性
+            playing: false,
+            loading: false,
+            playbackRate: 1,
+            volume: 100
+        },
     }
   },
   //计算属性 类似于data概念
@@ -448,6 +467,16 @@ export default {
             this.createCourseForm.audioResource = fileList
             this.createCourseForm.file_id = fileList[0]&&fileList[0].response&&fileList[0].response.file_info_list&&fileList[0].response.file_info_list[0]?fileList[0].response.file_info_list[0].file_id:''
             this.createCourseForm.file_url = fileList[0]&&fileList[0].response&&fileList[0].response.file_info_list&&fileList[0].response.file_info_list[0]?fileList[0].response.file_info_list[0].file_url:''
+            this.audio = {
+                // 该字段是音频是否处于播放状态的属性
+                playing: false,
+                loading: false,
+                playbackRate: 1,
+                volume: 100
+            }
+            setTimeout(() => {
+                this.handleLoadAudio()
+            }, 500);
         }else if(name==='courseResource'){
             fileList.forEach(item=>{
                 if(item.response&&item.response.file_info_list&&item.response.file_info_list[0]){
@@ -499,7 +528,14 @@ export default {
             intro:'',
             resource:[]
         }
-        this.player.destroy()
+        if(this.player) this.player.destroy()
+        this.audio = {
+            // 该字段是音频是否处于播放状态的属性
+            playing: false,
+            loading: false,
+            playbackRate: 1,
+            volume: 100
+        }
     },
     // 保存课节
     handleSaveCourse(formName){
@@ -713,14 +749,25 @@ export default {
                     item.type = this.handleJudgeType(type)
                 })
                 form.resource = res.resource_file_list
-                this.player = new Player({
-                    id: 'video-box',
-                    url: res.lb_course_cs_item.file_url,
-                    width: '100%',
-                    height: '100%',
-                    cssFullscreen: false,
-                    poster: '', // 封面图
-                });
+                if(this.organizeForm.courseType===0){
+                    this.player = new Player({
+                        id: 'video-box',
+                        url: res.lb_course_cs_item.file_url,
+                        width: '100%',
+                        height: '100%',
+                        cssFullscreen: false,
+                        poster: '', // 封面图
+                    });
+                }else{
+                    this.audio = {
+                        // 该字段是音频是否处于播放状态的属性
+                        playing: false,
+                        loading: false,
+                        playbackRate: 1,
+                        volume: 100
+                    }
+                    this.handleLoadAudio()
+                }
             }
         })
         .catch(() => {
@@ -733,8 +780,41 @@ export default {
         this.createCourseForm.videoResource = []
         this.createCourseForm.file_id = ''
         this.createCourseForm.file_url = ''
-        this.player.destroy()
-    }
+        if(this.player) this.player.destroy()
+        this.audio = {
+            // 该字段是音频是否处于播放状态的属性
+            playing: false,
+            loading: false,
+            playbackRate: 1,
+            volume: 100
+        }
+    },
+    // 加载音频
+    handleLoadAudio(){
+        let _this = this;
+        let audio = document.getElementsByTagName("audio");
+        console.log(audio)
+        audio[0].addEventListener("play", function () {
+            _this.audio.playing = true;
+            _this.audio.loading = false;
+        });
+        audio[0].addEventListener("pause", function () {
+            _this.audio.playing = false;
+        });
+        audio[0].addEventListener("ended", function () {
+            _this.audio.playing = false;
+        });
+    },
+    PlayAudio() {
+      let audio = document.getElementsByTagName("audio");
+      if (this.audio.playing) {
+        audio[0].pause();
+        this.audio.playing = false;
+      } else {
+        audio[0].play();
+        this.audio.playing = true;
+      }
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {