修改

src/stage/index/index.html

@@ -48,7 +48,7 @@
 	<script src="https://cdn.bootcss.com/crypto-js/3.1.9/sha1.min.js"></script>
 	<script src="https://cdn.bootcss.com/crypto-js/3.1.9/md5.min.js"></script>
 	<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
-	<script src="../../lib/js/FocusEngine.min.js"></script>
+	<script src="../../lib/js/FocusEngine.js"></script>
 	<script src="../../lib/js/blitz.js"></script>
 	<script src="../../lib/js/moye.min.js"></script>
 	<script src="../../lib/js/TVUtil.min.js"></script>

src/stage/index/scene/LessonScene.js

@@ -49,7 +49,6 @@ class LessonScene extends scene {
         		TVUtil.Toast.show('获取课件列表失败!', 1500);
                 return;
         	}
-            /*
         	if (response.data && response.data.list && response.data.list.length > 0) {
         		this.renderWareList(response.data.list);
         		this.wareList = response.data.list;
@@ -57,33 +56,6 @@ class LessonScene extends scene {
         		this.hideScene();
         		this.showScene(require('./DataBuildingScene'), {});
         	}
-            */
-            /* DEBUG */
-            let tmp = response.data.list || [];
-            tmp.push({
-                type: 1,
-                id: 'cxcxcxxccxxc',
-                category: '总结环节',
-                code: 'test-audio-code-1',
-                title: '小兔子过河',
-                list: [{
-                    type: 1,
-                    id: '324913247891',
-                    audioUrl: 'http://audio.ai160.com/audio/001/00103046/00103046021.mp3',
-                    url: 'resources/J/02/01/220101.jpg',
-                }, {
-                    type: 1,
-                    id: '324913247892',
-                    audioUrl: 'http://audio.ai160.com/audio/001/00103046/00103046021.mp3',
-                    url: 'resources/J/02/01/502001.jpg',
-                }, {
-                    type: 3,
-                    id: '32434243234',
-                    url: 'resources/J/02/01/502001.jpg',
-                }],
-            });
-    		this.renderWareList(tmp);
-    		this.wareList = tmp;
         });
     }
 
@@ -247,43 +219,38 @@ class LessonScene extends scene {
      */
     renderAudioView() {
         const curAudio = this.curAudioList[this.curAudioIndex];
-        const { url, audioUrl } = curAudio;
-    	document.getElementById('view-page').innerHTML = (this.curAudioIndex + 1) + '/' + this.curAudioList.length;
-        const audio = document.querySelector('.audio-wrapper');
-        // 如果audio标签不存在, 重新渲染view-content的内容
-        if (!audio) {
-            const audioDom = `
-                <div class="img-wrapper">
-                    <img src="${Consts.IMG_PATH}/${url}" />
-                </div>
-                <div class="audio-wrapper">
-                    <audio id="courseware-audio" src="${audioUrl}">您的浏览器暂不支持音频播放</audio>
-                </div>
-                <div class="audio-controls" style="display: block" fe-role="Switch">
-                    <!-- 播放/暂停 -->
-                    <div id="audio-play" class="audio-controls-item btn-play paused" fe-role="Widget"></div>
-                    <!-- 有声/静音 -->
-                    <div id="audio-mute" class="audio-controls-item btn-mute" fe-role="Widget"></div>
-                    <!-- 下一个音频 -->
-                    <div id="audio-next" class="audio-controls-item btn-next" fe-role="Widget"></div>
-                    <!-- 上一个音频 -->
-                    <div id="audio-last" class="audio-controls-item btn-last" fe-role="Widget"></div>
-                </div>
+        const { url, audioUrl, type } = curAudio;
+    	let footer = document.getElementById('view-page');
+        if (footer) {
+            footer.innerHTML = (this.curAudioIndex + 1) + '/' + this.curAudioList.length;
+        }
+        let content = document.getElementById('view-content');
+        // 1.更换背景图片
+        let imgHTML = `<img src="${Consts.IMG_PATH}/${url}" />`;
+        content.innerHTML = imgHTML;
+        // 2.根据是否有无audioURL来控制面板及audio的展现
+        if (type === Consts.TYPE_AUDIO && audioUrl) {
+            let audioElement = document.createElement('audio');
+            audioElement.setAttribute('id', 'courseware-audio');
+            audioElement.setAttribute('src', audioUrl);
+            let controlsElement = document.createElement('div');
+            controlsElement.setAttribute('class', 'audio-controls');
+            controlsElement.setAttribute('fe-role', 'Switch');
+            let controlsBtns = `
+                <!-- 播放/暂停 -->
+                <div id="audio-play" class="audio-controls-item btn-play paused" fe-role="Widget"></div>
+                <!-- 有声/静音 -->
+                <div id="audio-mute" class="audio-controls-item btn-mute" fe-role="Widget"></div>
+                <!-- 下一个音频 -->
+                <div id="audio-next" class="audio-controls-item btn-next" fe-role="Widget"></div>
+                <!-- 上一个音频 -->
+                <div id="audio-last" class="audio-controls-item btn-last" fe-role="Widget"></div>
             `;
-            document.getElementById('view-content').innerHTML = audioDom;
+            controlsElement.innerHTML = controlsBtns;
+            content.appendChild(audioElement);
+            content.appendChild(controlsElement);
             this.moye.root.reRender();
-            return;
-        }
-        // 如果audio标签已存在更新图片和音频内容
-        if (url) {
-            const newImgDom = `<img src="${Consts.IMG_PATH}/${url}"/>`;
-            document.querySelector('.img-wrapper').innerHTML = newImgDom;
-        }
-        if (audioUrl) {
-            document.querySelector('#courseware-audio').src = audioUrl;
-            document.querySelector('.audio-controls').style.display = 'block';
-        } else {
-            document.querySelector('.audio-controls').style.display = 'none';
+            FocusEngine.getWidgetById('audio-play').focus();
         }
     }