Bagaimana untuk menulis pemain audio dalam talian yang mudah melalui PHP-tutorial php-php.cn

Bagaimana untuk menulis pemain audio dalam talian yang mudah melalui PHP

WBOY

Lepaskan： 2023-09-24 08:54:02

asal

934 orang telah melayarinya

Bagaimana untuk menulis pemain audio dalam talian yang mudah melalui PHP

Cara menulis pemain audio dalam talian yang mudah melalui PHP

Dalam era Internet hari ini, penyebaran dan perkongsian sumber audio menjadi lebih dan lebih popular Mudah, oleh itu, membangunkan pemain audio dalam talian menjadi projek yang sangat praktikal dan menarik. Artikel ini akan memperkenalkan cara menulis pemain audio dalam talian yang mudah melalui PHP dan memberikan contoh kod khusus.

Untuk melaksanakan pemain audio dalam talian, kami memerlukan elemen berikut:

Susun atur muka: antara muka yang digunakan untuk memaparkan pemain audio ##; 🎜🎜#Pengurusan sumber audio: Muat naik fail audio ke pelayan dan uruskannya; kemajuan dalam masa nyata.
Pertama sekali, kami memerlukan reka letak antara muka untuk memaparkan pemain audio. Cipta fail HTML, contohnya player.html, dan tambahkan kod berikut:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Online Audio Player</title>
</head>
<body>
    <h1>Online Audio Player</h1>
    <audio id="audioPlayer" controls>
        <source src="audio.mp3" type="audio/mpeg">
    </audio>
</body>
</html>

Salin selepas log masuk

<audio></ kod > teg untuk mencipta pemain audio dan tentukan atribut <code>src

audio.mp3

player.html

upload.php

<?php
if($_FILES["audio"]["error"] == UPLOAD_ERR_OK) {
    $target_dir = "uploads/";
    $target_file = $target_dir . basename($_FILES["audio"]["name"]);
    if(move_uploaded_file($_FILES["audio"]["tmp_name"], $target_file)) {
        echo "上传成功！";
    } else {
        echo "上传失败！";
    }
}
?>

Salin selepas log masuk

Dalam kod di atas, kami menerimanya melalui $_FILES</ kod> fail Audio berubah-ubah yang dimuat naik oleh pengguna. Mula-mula semak sama ada muat naik fail berjaya Jika berjaya, alihkan fail ke direktori yang ditentukan (<code>uploads/ dalam contoh), dan akhirnya keluarkan maklumat yang sepadan. player.html，并添加以下代码：

<script>
    var audioPlayer = document.getElementById("audioPlayer");
    audioPlayer.onplay = function() {
        console.log("音频播放中...");
    }
    audioPlayer.onpause = function() {
        console.log("音频暂停。");
    }
    audioPlayer.onvolumechange = function() {
        console.log("音量变化：" + audioPlayer.volume);
    }
</script>

Salin selepas log masuk

在上面的代码中，我们使用了<audio>标签来创建一个音频播放器，并指定src属性为audio.mp3，这个路径可以根据实际情况进行修改。在浏览器中打开player.html，你将看到一个基本的音频播放器界面。

接下来，我们需要实现音频资源管理的功能。创建一个PHP文件，例如upload.php，并添加以下代码：

<script>
    var audioPlayer = document.getElementById("audioPlayer");
    audioPlayer.ontimeupdate = function() {
        var currentTime = audioPlayer.currentTime;
        var duration = audioPlayer.duration;
        console.log("当前时间：" + currentTime + "，总时长：" + duration);
    }
</script>

Salin selepas log masuk

在上述代码中，我们通过$_FILES变量来接收用户上传的音频文件。首先检查文件上传是否成功，如果成功，将文件移动到指定的目录（在例子中为uploads/），最后输出相应的信息。

然后，我们需要实现播放控制器的功能。修改player.html文件的代码，添加一个<script></script>标签，并在其中添加以下代码：

rrreee

在上述代码中，我们通过getElementById方法获取到了音频播放器的对象，并添加了一些事件监听器，用于在音频播放、暂停、音量变化时输出相应的信息。

最后，我们需要实时更新音频进度。修改player.html文件的代码，添加一个<script></script>标签，并在其中添加以下代码：

rrreee

在上述代码中，我们通过ontimeupdate

Kemudian, kita perlu melaksanakan fungsi pengawal main balik. Ubah suai kod fail player.html, tambahkan teg <script></script> dan tambahkan kod berikut di dalamnya:

rrreee

In kod di atas , kami memperoleh objek pemain audio melalui kaedah getElementById dan menambahkan beberapa pendengar acara untuk mengeluarkan maklumat yang sepadan apabila audio dimainkan, dijeda dan kelantangan berubah.

Akhir sekali, kami perlu mengemas kini kemajuan audio dalam masa nyata. Ubah suai kod fail player.html, tambahkan teg <script></script> dan tambahkan kod berikut di dalamnya:

rrreee#🎜🎜#In kod di atas , kami menggunakan acara ontimeupdate untuk mengemas kini masa main balik semasa dan jumlah tempoh dalam masa nyata dan mengeluarkan maklumat yang sepadan. #🎜🎜##🎜🎜#Setakat ini, kami telah melaksanakan pemain audio dalam talian yang mudah. Anda boleh menggunakan fail ini secara tempatan atau pada pelayan dan mengujinya. Dengan fungsi seperti memuat naik fail audio, kawalan main balik, pelarasan kelantangan dan kemas kini kemajuan audio masa nyata, anda boleh mendapatkan pemain audio dalam talian yang lengkap. #🎜🎜##🎜🎜#Ringkasan: #🎜🎜#Artikel ini memperkenalkan cara menulis pemain audio dalam talian yang ringkas melalui PHP, termasuk reka letak antara muka, pengurusan sumber audio, pengawal main balik dan kemas kini masa nyata kemajuan audio dan fungsi lain. Dengan contoh kod di atas, anda boleh mula menulis pemain audio anda sendiri dan melanjutkan fungsinya untuk memenuhi keperluan sebenar anda. Saya harap artikel ini dapat membantu anda, dan saya mengucapkan selamat berprogram! #🎜🎜#

Atas ialah kandungan terperinci Bagaimana untuk menulis pemain audio dalam talian yang mudah melalui PHP. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!