用html5實現音頻播放器

時間 2020-05-22

標籤 html5 html 實現音頻播放欄目 HTML5 简体版

原文原文鏈接

<!DOCTYPE html>html

<html>htm

<head>ip

<title></title>get

</head>it

<body>io

<div> function

<h4 id="name">許佳慧 - 公主範</h4>cli

<br>sed

</div>

<div>

</div>

//播放

var myaudio=document.getElementById("audio")

var btn1 = document.getElementById("btn-play");

btn1.onclick = function(){

if(myaudio.paused){

myaudio.play();

}

//

var btn2 = document.getElementById("btn-stop");

btn2.onclick = function(){

if(myaudio.played){

myaudio.pause();

}

var music = new Array();

music = ["許佳慧 - 公主範","周杰倫 - 東風破","周杰倫 - 青花瓷","一線 - 帶你去網吧偷耳機"];//歌單

var num = 0;

var name = document.getElementById("name");

//

var btn3 = document.getElementById("btn-pre");

btn3.onclick = function(){

num = (num +2)%4;

myaudio.src = "./"+"music/"+music[num]+".mp3";

name.innerHTML = music[num]+".mp3";

myaudio.play();

}

//

var btn4 = document.getElementById("btn-next");

btn4.onclick = function(){

num = (num +1)%4;

myaudio.src = "./"+"music/"+music[num]+".mp3";

name.innerHTML = music[num]+".mp3";

myaudio.play();

}

</script>

</body>

</html>

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><body><div> <h4 id="name">許佳慧 - 公主範</h4><br><audio id="audio" src="./music/許佳慧 - 公主範.mp3" controls autoplay></audio><br/></div><br><br><div><button id="btn-play">播放</button> <button id="btn-stop">暫停</button> <button id="btn-pre">上一首</button> <button id="btn-next">下一首</button> </div><script>//播放var myaudio=document.getElementById("audio")var btn1 = document.getElementById("btn-play");btn1.onclick = function(){if(myaudio.paused){ myaudio.play();}}//var btn2 = document.getElementById("btn-stop");btn2.onclick = function(){if(myaudio.played){ myaudio.pause();}}var music = new Array();music = ["許佳慧 - 公主範","周杰倫 - 東風破","周杰倫 - 青花瓷","一線 - 帶你去網吧偷耳機"];//歌單var num = 0;var name = document.getElementById("name"); //var btn3 = document.getElementById("btn-pre");btn3.onclick = function(){num = (num +2)%4;myaudio.src = "./"+"music/"+music[num]+".mp3";name.innerHTML = music[num]+".mp3";myaudio.play();}//var btn4 = document.getElementById("btn-next");btn4.onclick = function(){num = (num +1)%4;myaudio.src = "./"+"music/"+music[num]+".mp3";name.innerHTML = music[num]+".mp3";myaudio.play();}</script></body></html>