HTML5 Audio中控制音乐暂停、播放的js

最新推荐文章于 2026-03-05 01:11:20 发布

原创最新推荐文章于 2026-03-05 01:11:20 发布 · 1.4w 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

HTML5

当前文章被收录于：

HTML5

5 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了在HTML5中使用Audio元素进行音乐播放和暂停的操作。通过学习相关资料，作者发现jQuery中`p.load(); p.play()`无法正常工作，而`p.stop();`可以实现暂停。在JavaScript中，利用`play()`和`pause()`两个方法可以有效控制音频的播放和暂停状态。文中提供了使用jQuery和纯JavaScript实现的示例代码。

第一次接触HTML5，需要用到音乐播放audio的功能，在如何通过onclick事件控制audio的播放和暂停上查了一些资料，通过《HTML5学习系列之Audio(1)》和《HTML5 Audio/Video 标签,属性,方法,事件汇总》两篇博客的学习，试了一下，发现《HTML5学习系列之Audio(1)》中提到的p.load();p.play()在jQuery中失效，p.stop();倒是可以用。然后又尝试了《HTML5 Audio/Video 标签,属性,方法,事件汇总》给出的audio的方法和属性，在js中用play()、pause()两个方法控制播放和暂停，下面分别是jQuery和js代码：

jQuery代码：

$(function(){
	
	$(".stop").click(function(){				
		
		audio.bind('audio',stop());	
		
	});
		
	$(".play").click(function(){	
				
		audio.bind('audio',play());	//失效
		
	});
}

js代码：

    <script>
		function change(){
			Play = document.getElementById("audio"); 
			if(document.getElementById('play').className=="stop"){
				Play.pause();  
				document.getElementById('play').className="play";
				}else{
					Play.play();
					document.getElementById('play').className="stop";
					}
			}
	</script>