实现音频播放功能

解决README.md上的一些小错误

README.md

@@ -1,9 +1,10 @@
-<p align="center">
+<div style="text-align: center">
     <a href="https://github.com/yiisoft" target="_blank">
-        <img src="https://avatars0.githubusercontent.com/u/993323" height="100px">
+        <img src="https://avatars0.githubusercontent.com/u/993323" height="100px" alt="">
     </a>
-    <h1 align="center">基于Yii 2框架的网盘系统</h1>
+    <h1 style="text-align: center">基于Yii 2框架的网盘系统</h1>
-</p>
+</div>
+
 
 这是一个基于[Yii 2](https://www.yiiframework.com/) PHP框架设计的小型网盘系统，作为我的毕业设计作业，它具备基本的网盘功能。
 
@@ -48,7 +49,7 @@
 计划实现的功能
 -------------------
 
-文件预览(图像,视频ok)
+文件预览(图像,视频,音频ok)
 
 文件收集
 

views/home/index.php

@@ -150,6 +150,8 @@ $this->registerCssFile('@web/css/home_style.css');
                             <?= Html::a($item['name'], ['home/preview', 'relativePath' => $relativePath], ['class' => 'file_name', 'onclick' => 'previewImage(this, event)']) ?>
                         <?php elseif ($item['type'] === 'fa-regular fa-file-video'): ?>
                             <?= Html::a($item['name'], ['home/download', 'relativePath' => $relativePath, 'type' => $item['rawType']], ['class' => 'file_name', 'onclick' => 'previewVideo(this, event)']) ?>
+                        <?php elseif ($item['type'] === 'fa-regular fa-file-audio'): ?>
+                            <?= Html::a($item['name'], ['home/download', 'relativePath' => $relativePath, 'type' => $item['rawType']], ['class' => 'file_name', 'onclick' => 'previewAudio(this, event)']) ?>
                         <?php else: ?>
                             <?= Html::a($item['name'], ['home/download', 'relativePath' => $relativePath], ['class' => 'file_name']) ?>
                         <?php endif; ?>
@@ -180,10 +182,8 @@ $this->registerCssFile('@web/css/home_style.css');
 </div>
 
 <!--test area start-->
-<!--<video id="player" controls crossorigin playsinline>-->
+<!--<audio id="audioPlayer" src=""></audio>-->
-<!--    <source src="https://devs.chenx221.cyou:8081/index.php?r=home%2Fdownload&relativePath=%E3%80%90%E6%9C%9F%E9%96%93%E9%99%90%E5%AE%9A%E5%85%AC%E9%96%8B%E3%80%91%E9%95%B7%E7%80%AC%E6%9C%89%E8%8A%B1+LIVE+%E2%80%9CEureka%E2%80%9D+%5BDkt65nqwbhM%5D.webm"-->
+<!--<button id="audioBtn" onclick="testf()">播放</button>-->
-<!--            type="video/webm">-->
-<!--</video>-->
 <!--test area end-->
 
 <?php
@@ -277,7 +277,7 @@ ActiveForm::end();
 Modal::end();
 
 Modal::begin([
-    'title' => '<h4>视频在线播放</h4>',
+    'title' => '<h4>视频播放</h4>',
     'id' => 'videoModal',
     'size' => 'modal-xl',
 ]);
@@ -288,6 +288,17 @@ echo '<video id="vPlayer" controls crossorigin playsinline>
 
 Modal::end();
 
+Modal::begin([
+    'title' => '<h4>音频播放</h4>',
+    'id' => 'audioModal',
+//    'size' => 'modal-sm',
+]);
+
+echo '<audio id="aPlayer" controls>
+  <source src="" type="">
+</audio>';
+
+Modal::end();
 $this->registerJsFile('@web/js/home_script.js', ['depends' => [JqueryAsset::class], 'position' => View::POS_END]);
 ?>
 

web/js/home_script.js

@@ -439,8 +439,29 @@ function previewVideo(element, event) {
     videoModal.modal('show');
 }
 
-videoModal.on('hidden.bs.modal', function (e) {
+videoModal.on('hidden.bs.modal', function () {
     if (player) {
         player.destroy();
     }
+});
+
+//music preview
+var aPlayer;
+var audioModal = $('#audioModal');
+function previewAudio(element, event) {
+    event.preventDefault();
+    var audioElement = document.getElementById('aPlayer');
+    audioElement.src = element.href;
+    audioElement.type = element.getAttribute('type');
+
+    aPlayer = new Plyr(audioElement);
+    aPlayer.play();
+
+    // 显示模态框
+    audioModal.modal('show');
+}
+audioModal.on('hidden.bs.modal', function () {
+    if (aPlayer) {
+        aPlayer.destroy();
+    }
 });