通过HTML与JS实现简单的音乐切换

实现一个炒鸡简单的音频切换功能：

单机“我要听海豚音”按钮可以将当前播放的音乐进行切换。

效果如下图所示：

首先，我们先要首先页面的音乐播放。以及按钮的简单展示。

为了方便对audio进行操作以及更改音乐路径，我们需要给audio与source设置类，方便再js中进行操作：

<div>
	<audio controls="controls" loop="loop" class='musiccontrol'>
		<source src="audio/极乐净土.mp3" type="audio/mp3" class='musicsource'></source>
	</audio>
	<button onclick='changemusic()'>我要听海豚音</button>
</div>

在js中定义changemusic()方法用来修改音乐。

修改的大概思路是这样的：

首先对audio用pause()方法暂停当前播放的音乐；

之后，操作节点的方式将source中的src进行修改，即音频路径的替换。

然后对audio用load()方法对新音频进行加载，最后再用play()方法播放。

这样便可实现音乐的简单切换操作了。

js代码如下：

musiccontrol=document.querySelector('.musiccontrol')    //对应audio标签
musicsource= document.querySelector('.musicsource')    //对应source标签
function changemusic(){
	musiccontrol.pause()
	musicsource.src="audio/海豚音.mp3"
	musiccontrol.load()
	musiccontrol.play()
}

完成！！！

希望对您有所帮助^_^