js实现音乐播放器中点击歌名切歌

JavaScript015

js实现音乐播放器中点击歌名切歌,第1张

1、支持循环、随机播放

2、在播放的同时支持图片的旋转

3、支持点击进度条调整播放的位置，以及调整音量

4、显示音乐的播放时间

5、支持切歌：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html charset=gb2312" />

<title>无标题文档</title>

</head>

<body>

好

<input type="radio" id="hao3" name="myst1" value="小燕子" >小燕子

<input type="radio" id="hao4" name="myst1" value="短信歌" >短信歌

<br><hr>

没

<input type="radio" id="mei2" name="myst2" value="english" >english

<input type="radio" id="mo4" name="myst2" value="圣诞节歌曲短" >圣诞节歌曲短

<br><hr>

<input name="audioBox2" type="button"  id="audioBox2" onClick="play2()" value="播放(HTML5)"/>

<script type="text/javascript">

    function play2(){

var temp1 = document.getElementsByName("myst1")

var lwtmp1=""

 for(var i=0i<temp1.lengthi++)

 {

if(temp1[i].checked)

  lwtmp1 = temp1[i].value

 }

var temp2 = document.getElementsByName("myst2")

var lwtmp2=""

 for(var i=0i<temp2.lengthi++)

 {

if(temp2[i].checked)

  lwtmp2 = temp2[i].value

 }

 var lw1 = "D://sound/"+lwtmp1+".mp3"

 var lw2 = "D://sound/"+lwtmp2+".mp3"

       var arr = [lw1,lw2,]

        var myAudio2 = new Audio()

        myAudio2.preload = true

        myAudio2.controls = true

        myAudio2.src = arr.shift()

        myAudio2.addEventListener('ended', playEndedHandler2, false)

myAudio2.playbackRate=1

        myAudio2.play()

        document.getElementById("audioBox2").appendChild(myAudio2)

        myAudio2.loop = false

        function playEndedHandler2(){

            myAudio2.src = arr.shift()

myAudio2.playbackRate=2

            myAudio2.play()

            console.log(arr.length)

            !arr.length && myAudio2.removeEventListener('ended',playEndedHandler2,false)

        }

    }

</script>

</body>

</html>

给你了一个例子，改一下里面的value值，和lw1，lw2值就可以打开页面播放了

HTML5 中的audio对象提供可用于通过JavaScript控制播放的方法、属性以及事件。

在JavaScript中播放和暂停音频播放

使用HTML5

audio元素可向网页中添加音频，而无需使用外部控件或程序。但是，除非你的网页只需要一个简单的音频播放器，否则你很可能想对加载的音频文件及其播放

拥有更多的控制。若要将audio元素与 JavaScript 结合使用，请定义audio标记，该标记具有 "ID"

并且可以选择省略其他所有内容。你可以显示或隐藏内置控件，或将音频设置为在页面加载时自动播放。使用

JavaScript，你仍然可以执行该操作并且还可以执行进一步操作。

在以下示例中，我们在 HTML 中使用简单的 audio 标记语法。

<input type="text" id="audiofile" size="80" value="demo.mp3" />

音频播放器的所有其他功能可通过JavaScript进行控制，如以下脚本所示。

var currentFile = ""

function playAudio() {

// Check for audio element support.

if (window.HTMLAudioElement) {

try {

var oAudio = document.getElementById('myaudio')

var btn = document.getElementById('play')

var audioURL = document.getElementById('audiofile')

//Skip loading if current file hasn't changed.

if (audioURL.value !== currentFile) {

oAudio.src = audioURL.value

currentFile = audioURL.value

}

// Tests the paused attribute and set state.

if (oAudio.paused) {

oAudio.play()

btn.textContent = "Pause"

}

else {

oAudio.pause()

btn.textContent = "Play"

}

}

catch (e) {

// Fail silently but show in F12 developer tools console

if(window.console &&console.error("Error:" + e))

}

}

}

在示例的 HTML 部分，为audio元素指定id="myaudio" 和源文件"demo.mp3"。定义 id="play" 的按钮和触发 "playAudio()" JavaScript 函数的onclick事件。

在 JavaScript 部分中，使用

document.getElementById返回audio 对象。play和pause方法用于提供播放控制。检索button

对象以便可以在“播放”和“暂停”之间切换按钮标签，具体情况取决于audio 对象的paused属性的状态。 每次调用 "playAudio"

函数时都会检查该状态。 如果音频文件正在播放，则paused属性返回false，并且调用pause方法来暂停播放。按钮标签也设置为“播放”。

如果文件已暂停，则paused属性返回true，并且调用play方法，按钮标签更新为“暂停”。第一次加载文件时，即使尚未显式调用 pause方法，paused属性也返回 true（播放已暂停）。

在HTML代码中，默认情况下按钮处于禁用状态。当页面加载时，在主体标记中使用 onload 事件调用checkSupport() 函数。如果 audio元素存在，则启用按钮。