网页播放背景音乐实现完整代码

ゝ一纸荒年。 2023-01-01 05:50 160阅读 0赞

代码如下：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    		<title></title>
    	</head>
    	<body>
    		<div id="">
    			你好
    		</div>
    		<audio id="music1" controls="controls" autoplay="autoplay" preload id="music1" hidden>
    			<source src="https://xxx-vue-2d4g055fe160b-1254304076.tcloudbaseapp.com/test/5.mp3" />
    		</audio>
    			
    		<button type="button" onclick="play()">播放</button>
    		
    		<script type="text/javascript">
    			var audio = document.getElementById('music1');
    			// $("#btn").bind("touchstart", function bf() {
    
    			// 	if (audio !== null) {
    			// 		//检测播放是否已暂停.audio.paused 在播放器播放时返回false.
    			// 		//alert(audio.paused);
    			// 		if (audio.paused) {
    			// 			audio.play(); //audio.play();// 这个就是播放
    			// 			$("#btn").addClass("active")
    			// 		} else {
    			// 			audio.pause(); // 这个就是暂停
    			// 			$("#btn").removeClass("active")
    			// 		}
    			// 	}
    			// })
    			function play(){
    				console.log('aaaaaa')
    				alert('播放音乐')
    				audio.play();
    			}
    		</script>
    	</body>
    </html>

点击播放按钮，就可以播放拉。

发表评论取消回复

表情：

评论列表（有 0 条评论，160人围观）

还没有评论，来说两句吧...

相关阅读

相关 MFC中播放背景音乐

、添加Lib文件 \pragma comment(lib, "Winmm.lib") 2、使用mciSendString是用来播放MP3 //播放背景音乐 mc...

深碍√TFBOYSˉ_/ 2024年04月17日 06:07/ 0 赞/ 71 阅读

相关 ios背景音乐自动播放js代码

手机自带的机制为用户减少流量，屏蔽了音乐自动播放功能，但有时我们要用到音乐自动播放，下面的js代码可以让手机自动播放背景音乐 $(function()\{ // io

待我称王封你为后i/ 2023年10月17日 19:07/ 0 赞/ 49 阅读

相关网页播放背景音乐实现完整代码

代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <sc

ゝ一纸荒年。/ 2023年01月01日 05:50/ 0 赞/ 161 阅读

相关音乐标签网页自动播放

<!-- <iframe src="https://www.1ting.com/player/65/player_1107483.html" allow="autopl

谁践踏了优雅/ 2022年12月29日 14:21/ 0 赞/ 260 阅读

相关【Java】打开窗体后自动播放背景音乐代码实现

简易音乐播放器窗体类音乐类实现效果新建一个窗体后程序自动播放音乐，可以选择自己喜欢的歌曲播放

左手的ㄟ右手/ 2022年11月29日 05:34/ 0 赞/ 345 阅读

相关音乐自动播放html代码大全,网页HTML音乐播放器代码大全

网页HTML音乐播放器代码大全 HituxCMS.com 2013年5月26日字体大小: autostart="true"中true或1表示自动播放，false或

系统管理员/ 2022年10月05日 12:53/ 0 赞/ 391 阅读

相关手机端自动播放网页背景音乐代码

特别声明：在页面标签中必须使用<audio>标签方有效。 function toggleSound() \{ var music = document.getElem

短命女/ 2022年06月05日 03:55/ 0 赞/ 417 阅读

相关网页添加背景音乐

为网页添加背景音乐的方法一般有两种，第一种是通过普通的<bgsound>标签来添加，另一种是通过<embed>标签来添加。（一）使用<bgsound>标签用Dr

àì夳堔傛蜴生んèń/ 2021年11月19日 13:48/ 0 赞/ 481 阅读

相关微信播放背景音乐

api->媒体->背景音频播放 wx.playBackgroundAudio({ dataUrl: '', titl

旧城等待，/ 2021年07月24日 15:53/ 0 赞/ 549 阅读

相关 HTML音频：音乐播放网页

HTML音频：音乐播放网页任务描述相关知识使用HTML5 audio元素播放属性使用雅虎媒体播放器播放

妖狐艹你老母/ 2021年05月16日 20:37/ 0 赞/ 751 阅读