Post
Ask Question

Music Player Using HTML and JavaScript

Introduction

 
Hello geeks. Today I will show you how to make your own personal music player but this time only using the functionalities of HTML and JavaScript. 
 
Use the following procedure, here we go:
 
1. Open a text editor.
 
2. Enter this code and save the file with a name, like Music Player, having an extension of .htm or .html.
  1. <html>  
  2. <head>  
  3.     <title>Music Player </title>  
  4. </head>  
  5. <body>  
  6.     <audio controls="”controls”">  
  7. <source src=”music .mp3” type=”audio/mp3”>  
  8. <source src=”music .ogg” type=”audio/ogg”>  
  9. </audio>  
  10. </body>  
  11. </html> 
3. Copy and save some music files to the same destination that you have already saved that code page.
 
4. Now in the <audio> tag, make these modifications, since we will use JavaScript in the code. The modifications are:
 
delete controls=”controls”
 
Along with attribute and value.
 
5. So, due to these modifications the controls will not be visible, you can provide these controls to the user using the JavaScript functionality of click events.
 
6. Add these button codes between the tags:
  1. <button onclick=”playMusic()”>Play</button>  
  2. <br/>  
  3. <button onclick=”pauseMusic()”>Pause</button>  
  4. <br/>  
  5. <button onclick=”stopMusic()”>Stop</button>  
  6. <br/> 
 
Music player
 
This code will make the buttons appear on the screen. Now what we need to do next is to provide the functioning of the click event.
 
7. Now we need to create some JavaScript functions. Follow these sub steps:
 
7.1. Create a script between the <head> …. </head> tags as in the following:
  1. <head>  
  2.     <title>Music Player </title>  
  3.     <script>  
  4.     </script>  
  5. </head> 
7.2. Now will make a function between the <script> …. </script> tags as in the following:
  1. <head>  
  2.     <title>Music Player </title>  
  3.     <script>  
  4.         function playMusic() {  
  5.         }  
  6.     </script>  
  7. </head>  
7.3. Now modify the two other options as in the following:
  1. <head>  
  2.     <title>Music Player </title>  
  3.     <script>  
  4.         function playMusic() {  
  5.         }  
  6.         function pauseMusic() {  
  7.         }  
  8.         function stopMusic() {  
  9.         }  
  10.     </script>  
  11. </head> 
7.4. Now we will make a major task between these script tags, perform these tasks precisely, since JavaScript is case sensitive:
  1. <head>  
  2.     <title>Music Player </title>  
  3.     <script>  
  4. Var player;  
  5. window.onload =function()  
  6. {  
  7. player = document.getElementById(‘player’);  
  8. }  
  9. function playMusic()  
  10. {  
  11. player.play();  
  12. }  
  13. function pauseMusic()  
  14. {  
  15. Player.pause();  
  16. }  
  17. function stopMusic()  
  18. {  
  19. Player.stop();  
  20. }  
  21.     </script>  
  22. </head>   
8. Now for the last modification, you need to do that in general HTML code as in the following:
 
put <audio id=”player”> 


Similar Articles