How to play different mp3 files by passing a URL parameter

Posted on by

If your web server supports a server-side script, for example PHP, you can pass a URL parameter to the player webpage, then play different mp3 files according to the URL parameter.

This is useful when you use iframe to add players to a webpage and you want to use the same player to play different mp3 files.

For example, the following player will play the Pride and Prejudice Chapter 1:

https://amazingaudioplayer.com/demo/audioplayer.php

The following URLs will open the players for Chapter 2, 3 and 4.

https://amazingaudioplayer.com/demo/audioplayer.php?audio=2

https://amazingaudioplayer.com/demo/audioplayer.php?audio=3

https://amazingaudioplayer.com/demo/audioplayer.php?audio=4

This tutorial will guide you how to create the audioplayer.php file in the above demos.

First, create a player, then rename or copy the generated audioplayer.html to audioplayer.php.

Add the following code to the beginning of the webpage:

<?php
  $audioTitle = "Chapter 1";
  $audioUrl = "https://amazingaudioplayer.com/demo/prideandprejudice_01.mp3";

  if ( !empty( $_GET["audio"] ) ) {
    switch( $_GET["audio"] ) {
      case 1:
        $audioTitle = "Chapter 1";
        $audioUrl = "https://amazingaudioplayer.com/demo/prideandprejudice_01.mp3";
        break;
      case 2:
        $audioTitle = "Chapter 2";
        $audioUrl = "https://amazingaudioplayer.com/demo/prideandprejudice_02.mp3";
        break;
      case 3:
        $audioTitle = "Chapter 3";
        $audioUrl = "https://amazingaudioplayer.com/demo/prideandprejudice_03.mp3";
        break;
      case 4:
        $audioTitle = "Chapter 4";
        $audioUrl = "https://amazingaudioplayer.com/demo/prideandprejudice_04.mp3";
        break;
    }
  }
?>

In the above code, first we define default values for the audio title and url, then we test the URL parameter $_GET[“audio”], and change the title and URL accordingly.

In the player body HTML code, we change the data-title and data-src to echo the PHP variables:

<li data-artist="" data-title="<?php echo $audioTitle; ?>" data-album="" data-info="" data-image="" data-duration="0">
    <div class="amazingaudioplayer-source" data-src="<?php echo $audioUrl; ?>" data-type="audio/mpeg" ></div>
</li>

The complete code of audioplayer.php is as follows:

<?php
  $audioTitle = "Chapter 1";
  $audioUrl = "https://amazingaudioplayer.com/demo/prideandprejudice_01.mp3";

  if ( !empty( $_GET["audio"] ) ) {
    switch( $_GET["audio"] ) {
      case 1:
        $audioTitle = "Chapter 1";
        $audioUrl = "https://amazingaudioplayer.com/demo/prideandprejudice_01.mp3";
        break;
      case 2:
        $audioTitle = "Chapter 2";
        $audioUrl = "https://amazingaudioplayer.com/demo/prideandprejudice_02.mp3";
        break;
      case 3:
        $audioTitle = "Chapter 3";
        $audioUrl = "https://amazingaudioplayer.com/demo/prideandprejudice_03.mp3";
        break;
      case 4:
        $audioTitle = "Chapter 4";
        $audioUrl = "https://amazingaudioplayer.com/demo/prideandprejudice_04.mp3";
        break;
    }
  }
?>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <meta name="viewport" content="width=device-width">
    <title>Amazing HTML5 Audio Player</title>

    <!-- Insert to your webpage before the </head> -->
    <script src="audioplayerengine/jquery.js"></script>
    <script src="audioplayerengine/amazingaudioplayer.js"></script>
    <link rel="stylesheet" type="text/css" href="audioplayerengine/initaudioplayer-1.css">
    <script src="audioplayerengine/initaudioplayer-1.js"></script>
    <!-- End of head section HTML codes -->

</head>
<body>
<div style="margin:12px auto;">

    <!-- Insert to your webpage where you want to display the audio player -->
    <div id="amazingaudioplayer-1" style="display:block;position:relative;width:100%;max-width:420px;height:auto;margin:0px auto 0px;">
        <ul class="amazingaudioplayer-audios" style="display:none;">
            <li data-artist="" data-title="<?php echo $audioTitle; ?>" data-album="" data-info="" data-image="" data-duration="0">
                <div class="amazingaudioplayer-source" data-src="<?php echo $audioUrl; ?>" data-type="audio/mpeg" ></div>
            </li>
        </ul>
    </div>
    <!-- End of body section HTML codes -->

</div>
</body>
</html>