CODEWITHSUNDEEP
javascripthtmlcustom-controlshtml5-audio
Anonymation TwentyFourSeven
Anonymation TwentyFourSeven

Reputation: 23

Custom HTML5 Mp3 Player

I need this in full functionality but I seem to of forgotten how to connect multiple JavaScript files into one function. Here's my Index.html

<!DOCTYPE html>
<html> 
<head> 
<script type="text/javascript"
source src="/storage/
emulated/0/Documents/
Mp3Player/js/
MyScript.js"></script>
<script type="text/javascript"
source src="/storage/
emulated/0/Documents/
Mp3Player/js/MyScript1.js"></
script>
</head> 
<body> 
<img src="/storage/emulated/0/
Documents/Mp3Player/html/
images/play.jpg" width="200" 
height="200" onclick="play(); 
changeImage();"> 
<audio id="audio" src="/storage/
emulated/0/Documents/
Mp3Player/html/music/
Rap_In_Darkness.mp3 "/>
</body> 
</html>

Here's MyScript.js for audio playing.

function play(){ var myAudio = 
document.getElementById 
("audio"); if(myAudio.paused) 
myAudio.play(); else 
myAudio.pause(); }

Here's MyScript1.js for pause/play button images.

function changeImage() { if 
(document.getElementById
("imgClickAndChange").src == "/
storage/emulated/0/
Documents/Mp3Player/html/
images/Pause.jpg") { 
document.getElementById
("imgClickAndChange").src = "/
storage/emulated/0/
Documents/Mp3Player/html/
images/play.jpg "; } else { 
document.getElementById
("imgClickAndChange").src = "
storage/emulated/0/
Documents/Mp3Player/html/
images/Pause.jpg "; } }

Upvotes: 1

Views: 461

Answers (1)

Bondan Sebastian
Bondan Sebastian

Reputation: 1015

Modify your index.html like this

<!DOCTYPE html>
<head> 
<script type="text/javascript"
src="/storage/
emulated/0/Documents/
Mp3Player/js/
MyScript.js"></script>
<script type="text/javascript"
src="/storage/
emulated/0/Documents/
Mp3Player/js/MyScript1.js"></
script>
</head> 
<body> 
<img src="/storage/emulated/0/
Documents/Mp3Player/html/
images/play.jpg" width="200" 
height="200" onclick="play(); 
changeImage();"> 
<audio id="audio" src="/storage/
emulated/0/Documents/
Mp3Player/html/music/
Rap_In_Darkness.mp3 "/>
</body> 
</html>

Then your MyScript.js like this

function play(){ var myAudio = 
document.getElementById 
("audio"); if(myAudio.paused) 
myAudio.play(); else 
myAudio.pause(); }

Finally, your MyScript1.js like this

function changeImage() { if 
(document.getElementById
("imgClickAndChange").src == "/
storage/emulated/0/
Documents/Mp3Player/html/
images/Pause.jpg") { 
document.getElementById
("imgClickAndChange").src = "/
storage/emulated/0/
Documents/Mp3Player/html/
images/play.jpg "; } else { 
document.getElementById
("imgClickAndChange").src = "
storage/emulated/0/
Documents/Mp3Player/html/
images/Pause.jpg "; } }

Upvotes: 1

Related Questions