实现音频播放功能

解决README.md上的一些小错误
This commit is contained in:
Chenx221 2024-02-19 13:44:22 +08:00
parent f970a801ce
commit 1727f34516
Signed by: chenx221
GPG Key ID: D7A9EC07024C3021
3 changed files with 44 additions and 11 deletions

View File

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

View File

@ -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)']) ?> <?= Html::a($item['name'], ['home/preview', 'relativePath' => $relativePath], ['class' => 'file_name', 'onclick' => 'previewImage(this, event)']) ?>
<?php elseif ($item['type'] === 'fa-regular fa-file-video'): ?> <?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)']) ?> <?= 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: ?> <?php else: ?>
<?= Html::a($item['name'], ['home/download', 'relativePath' => $relativePath], ['class' => 'file_name']) ?> <?= Html::a($item['name'], ['home/download', 'relativePath' => $relativePath], ['class' => 'file_name']) ?>
<?php endif; ?> <?php endif; ?>
@ -180,10 +182,8 @@ $this->registerCssFile('@web/css/home_style.css');
</div> </div>
<!--test area start--> <!--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--> <!--test area end-->
<?php <?php
@ -277,7 +277,7 @@ ActiveForm::end();
Modal::end(); Modal::end();
Modal::begin([ Modal::begin([
'title' => '<h4>视频在线播放</h4>', 'title' => '<h4>视频播放</h4>',
'id' => 'videoModal', 'id' => 'videoModal',
'size' => 'modal-xl', 'size' => 'modal-xl',
]); ]);
@ -288,6 +288,17 @@ echo '<video id="vPlayer" controls crossorigin playsinline>
Modal::end(); 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]); $this->registerJsFile('@web/js/home_script.js', ['depends' => [JqueryAsset::class], 'position' => View::POS_END]);
?> ?>

View File

@ -439,8 +439,29 @@ function previewVideo(element, event) {
videoModal.modal('show'); videoModal.modal('show');
} }
videoModal.on('hidden.bs.modal', function (e) { videoModal.on('hidden.bs.modal', function () {
if (player) { if (player) {
player.destroy(); 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();
}
}); });