CrimsonKing
Coder
Today I am going to teach you how to make A simple Audio Player in HTML 5, JavaScript, and CSS. To follow this tutorial be sure to download notepad++ being as it is mostly used in HTML, JavaScript, and CSS. Let's begin to start this we will need 3 important files to make 1. HTML (player.html), 2. JavaScript (player.js), 3. CSS (player.css). After we have created our 3 main important items, we need to create 2 folders inside the folder you added your main important classes, 1. Audio, 2. Textures. After that we add our music(sounds) and textures(play button, stop button, pause button, replay button, volume icon(button / image), background). After that we type in the following code in the HTML file
[CODE lang="html" title="HTML Class File" highlight="1,1-21"]<html>
<head>
<script type="text/javascript" src="player.js"></script>
<link rel="stylesheet" type="text/css" href="player.css">
</head>
<body>
<div id="wrapper">
<div id='player'>
<audio id="music_player">
<source src="Audio/Your_Audio.mp3"/>
</audio>
<input type="image" src="Textures/play.png" onclick="play_aud()" id="play_button">
<input type="image" src="Textures/pause.png" onclick="pause_aud()" id="play_button">
<input type="image" src="Textures/stop.png" onclick="stop_aud()" id="play_button">
<input type="image" src="Textures/replay.png" onclick="replay_aud()" id="play_button">
<img src="Textures/volume.png" id="vol_img">
<input type="range" id="change_vol" onchange="change_vol()" step="0.05" min="0" max="1" value="1">
</div>
</div>
</body>
</html>[/CODE]
Now we type in the following code for the CSS file
[CODE lang="css" title="CSS Class File" highlight="1,1-38"]body
{
width:100%;
margin:0 auto;
padding:0px;
font-family:helvetica;
background-color:#00000F;
}
#wrapper
{
text-align:center;
margin:0 auto;
padding:50px;
width:995px;
}
#player
{
background-color:#4CBB17;
width:400px;
margin-left:300px;
padding:5px;
box-sizing:border-box;
background:url(Textures/background.png);
}
input[type="image"]
{
float:left;
height:20px;
margin-left:2px;
margin-right:5px;
margin-top:2px;
}
#vol_img
{
margin-left:150px;
width:20px;
}[/CODE]
Now we enter the following code for the JavaScript file
[CODE lang="javascript" title="JavaScript Class File" highlight="1,1-30"]document.addEventListener("DOMContentLoaded", function() { startplayer(); }, false);
var player;
function startplayer()
{
player = document.getElementById('music_player');
player.controls = false;
}
function play_aud()
{
player.play();
}
function pause_aud()
{
player.pause();
}
function stop_aud()
{
player.pause();
player.currentTime = 0;
}
function replay_aud()
{
player.loop = true;
}
function change_vol()
{
player.volume=document.getElementById("change_vol").value;
}[/CODE]
Download the zipped Project here containing all the tutorial files. Tutorial Project
NEW! Updated Tutorial Project! Added in A few big major adjustments and some pretty cool features. See the updated Tutorial Project here! Updated Tutorial Project
[CODE lang="html" title="HTML Class File" highlight="1,1-21"]<html>
<head>
<script type="text/javascript" src="player.js"></script>
<link rel="stylesheet" type="text/css" href="player.css">
</head>
<body>
<div id="wrapper">
<div id='player'>
<audio id="music_player">
<source src="Audio/Your_Audio.mp3"/>
</audio>
<input type="image" src="Textures/play.png" onclick="play_aud()" id="play_button">
<input type="image" src="Textures/pause.png" onclick="pause_aud()" id="play_button">
<input type="image" src="Textures/stop.png" onclick="stop_aud()" id="play_button">
<input type="image" src="Textures/replay.png" onclick="replay_aud()" id="play_button">
<img src="Textures/volume.png" id="vol_img">
<input type="range" id="change_vol" onchange="change_vol()" step="0.05" min="0" max="1" value="1">
</div>
</div>
</body>
</html>[/CODE]
Now we type in the following code for the CSS file
[CODE lang="css" title="CSS Class File" highlight="1,1-38"]body
{
width:100%;
margin:0 auto;
padding:0px;
font-family:helvetica;
background-color:#00000F;
}
#wrapper
{
text-align:center;
margin:0 auto;
padding:50px;
width:995px;
}
#player
{
background-color:#4CBB17;
width:400px;
margin-left:300px;
padding:5px;
box-sizing:border-box;
background:url(Textures/background.png);
}
input[type="image"]
{
float:left;
height:20px;
margin-left:2px;
margin-right:5px;
margin-top:2px;
}
#vol_img
{
margin-left:150px;
width:20px;
}[/CODE]
Now we enter the following code for the JavaScript file
[CODE lang="javascript" title="JavaScript Class File" highlight="1,1-30"]document.addEventListener("DOMContentLoaded", function() { startplayer(); }, false);
var player;
function startplayer()
{
player = document.getElementById('music_player');
player.controls = false;
}
function play_aud()
{
player.play();
}
function pause_aud()
{
player.pause();
}
function stop_aud()
{
player.pause();
player.currentTime = 0;
}
function replay_aud()
{
player.loop = true;
}
function change_vol()
{
player.volume=document.getElementById("change_vol").value;
}[/CODE]
Download the zipped Project here containing all the tutorial files. Tutorial Project
NEW! Updated Tutorial Project! Added in A few big major adjustments and some pretty cool features. See the updated Tutorial Project here! Updated Tutorial Project
Last edited:
