chenx221/yii2-netdisk
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

实现音频播放功能

Browse Source 
解决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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
README.md
View File

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

21
views/home/index.php
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)']) ?>
<?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>-->
<!-- <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"-->
<!-- type="video/webm">-->
<!--</video>-->
<!--<audio id="audioPlayer" src=""></audio>-->
<!--<button id="audioBtn" onclick="testf()">播放</button>-->
<!--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]);
?>

23
web/js/home_script.js
View File

@ -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();
}
});