How to write a simple online audio player via PHP-PHP Tutorial-php.cn

How to write a simple online audio player via PHP

WBOY

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

Original

938 people have browsed it

How to write a simple online audio player via PHP

How to write a simple online audio player through PHP

In today's Internet era, the dissemination and sharing of audio resources is becoming more and more convenient. Therefore, it is necessary to develop an An online audio player becomes a very practical and fun project. This article will introduce how to write a simple online audio player through PHP and provide specific code examples.

To implement an online audio player, we need the following elements:

Interface layout: the interface used to display the audio player;
Audio resources Management: Upload audio files to the server and manage them;
Playback controller: used for play, pause, adjust volume and other operations;
Update audio progress in real time.

First, we need an interface layout to display the audio player. Create an HTML file, for example player.html, and add the following code:

<!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>

Copy after login

In the above code, we have used the <audio> tag to create An audio player, and specify the src attribute as audio.mp3. This path can be modified according to the actual situation. Open player.html in your browser and you will see a basic audio player interface.

Next, we need to implement the audio resource management function. Create a PHP file, such as upload.php, and add the following code:

<?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 "上传失败！";
    }
}
?>

Copy after login

In the above code, we receive the audio uploaded by the user through the $_FILES variable document. First check whether the file upload is successful. If successful, move the file to the specified directory (uploads/ in the example), and finally output the corresponding information.

Then, we need to implement the function of the playback controller. Modify the code of the player.html file, add a <script> tag, and add the following code inside it:

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

Copy after login

In the above code, we pass # The ##getElementById method obtains the object of the audio player and adds some event listeners to output corresponding information when the audio is played, paused, and the volume changes.

Finally, we need to update the audio progress in real time. Modify the code of the

player.html file, add a <script> tag, and add the following code inside it:

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

Copy after login

In the above code, we pass

ontimeupdate event to update the current playback time and total duration in real time, and output the corresponding information.

So far, we have implemented a simple online audio player. You can deploy these files locally or on a server and test them. With functions such as uploading audio files, playback control, volume adjustment, and real-time audio progress updates, you can get a complete online audio player.

Summary:

This article introduces how to write a simple online audio player through PHP, including interface layout, audio resource management, playback controller and real-time update of audio progress and other functions. With the above code examples, you can start writing your own audio player and extend its functionality to meet your practical needs. I hope this article can be helpful to you, and I wish you happy programming!

The above is the detailed content of How to write a simple online audio player via PHP. For more information, please follow other related articles on the PHP Chinese website!