自定义HTML5 Mp3播放器

时间:2017-01-28 02:46:06

标签: javascript html5 custom-controls html5-audio

我需要完整功能,但我似乎忘记了如何将多个JavaScript文件连接到一个函数中。 这是我的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>

这是播放音频的MyScript.js。

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

这是暂停/播放按钮图像的MyScript1.js。

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 "; } }

1 个答案:

答案 0 :(得分:1)

像这样修改index.html

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

然后你的MyScript.js喜欢这个

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

最后,您的MyScript1.js喜欢这个

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 "; } }