jQuery播放音乐

最新推荐文章于 2024-06-29 16:57:52 发布
最新推荐文章于 2024-06-29 16:57:52 发布
阅读量3.2k 收藏 2
点赞数
文章标签： jquery javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37013391/article/details/122282405
版权

通过jQuery播放mp3音乐

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script th:src="@{/static/js/jquery-3.6.0.js}"></script>
</head>
<body>
	<audio autoplay="autoplay" id="audio" loop="loop">
        <source th:src="@{/static/music/BGM.mp3}" type="audio/MP3">
    </audio>
    <img id="player" class="music_img" th:src="@{/static/music/music-note.png}" alt="">
</body>
<script>
    $(function () {
        let music = $("#audio")[0]; // jQuery对象转dom对象
        let musicImg = $("#player");
        // setTimeout(() => {music.play();}, 1000);  // 1s后自动播放
        musicImg.click(function () {  // 点击图标:播放 or 暂停
           if (music.paused) {
               music.play();
           } else
               music.pause();
        });
    })
</script>
</html>
Dershi
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery实现的网页自动播放声音
10-26
主要介绍了使用jquery如何实现的网页自动播放声音,需要的朋友可以参考下
利用jQuery实现音乐播放器
热门推荐
u010046318的博客
06-14 1万+
本人挺喜欢音乐，一直有个想法实现一个音乐播放器，之前一直都在积累知识，学习了原生JS和jQuery库。现在觉得是时候了，因此这次利用jQuery库来实现。这个音乐播放器现在实现的主要有以下功能： 在主页面点击播放歌曲； 页面底部点击可以跳到播放页面，页面底部的播放按钮也能控制音乐播放/暂停； 播放页面自制进度条； 主页面轮播图特效； 上一曲，下一曲功能，循环播放模式的实现，以及点击列表按钮显示播放列
jQuery 知识点：播放MP3（audio标签）
--柴犬馒头--的博客
09-26 2018
html标签： <audio id="audio" src=""></audio> jquery设置方法： // 设置音频路径 $("#audio").attr("src","audioPath"); // 需要先将jquery对象转换成js对象才能调用相应的方法 // 播放音频 $("#audio")[0].play(); // 暂停音频 $("#audio"...
【小河今学 | JavaScript + JQuery】音乐播放器2-功能实现
LB_laber的博客
08-16 1359
音乐播放器
jQuery音频语音自动播放代码
04-07
jQuery音频语音自动播放代码是一款手机端mp3文件播放器，支持audio标签声音音频自动播放，暂停，停止，跳转到第几秒播放，兼容安卓，苹果ios系统。
jQuery音乐播放歌词同步显示特效代码
03-20
jQuery音乐播放歌词同步显示代码是一款简单实用的mp3音乐播放器代码，歌词调用写在js文件里面可自行修改。
jQuery Audio音乐播放代码
07-24
jQuery Audio音乐播放代码是一款基于audio属性制作的mp3音乐播放器，暂停播放音乐播放演示代码。
jQuery列表音乐播放
06-01
只有列表，没有播放器。只能同时播放一个音频，可以暂停。
jQuery Mobile音乐播放实例源码
03-01
jQuery Mobile音乐播放代码 为什么使用 jQuery Mobile? 通过使用jQuery Mobile 可以 "写更少的代码，做更多的事情" : 它可以通过一个灵活及简单的方式来布局网页，且兼容所有移动设备。 lamp 不同设备使用了...
利用jquery进行音频文件播放
05-20
利用jquery进行音频文件播放
jQuery网页mp3音乐播放器代码
06-10
jQuery网页mp3音乐代码是一款很不错的带收藏，下载，分享等功能的在线插件。
jquery音频播放
07-05
使用jquery插件jmp3实现web页面播放音乐文件，我只测试了mp3格式的，其他格式的没试过，本Demo希望对大家有所帮助.
jquery音乐播放器
08-03
jquery音乐播放器,主要功能：播放暂停，滑动或点击调节音量，滑动或点击调节进度，歌词同步，拖拽歌词调节进度。音乐文件是静态的，可自行修改从服务器上获取，主要的逻辑都写好了。
jquery播放mp3
weixin_30418341的博客
08-01 946
$("button").on("click",function(){ 　　 $('embed').remove(); $('body').append('<embed src="../../../sound/hit.mp3" autostart="true" hidden="true" loop="false">'); }) 转载于:...
jQuery三款简约MP3播放器插件
ICode联盟
02-28 458
下载地址 非常简约的mp3播放器插件，必须将singlemp3player.swf放在jMP3的同目录下。 dd:
jQuery小型mp3音乐播放器插件
ICode联盟
04-15 419
下载地址 jquery和css3制作的网页音乐播放器插件，简约漂亮的ui样式，支持mp3多首歌曲切换，带标题和进度条拖动音频播放代码 dd:
html页面点击按钮播放语音,javascript – 当点击按钮时使用jQuery播放音频文件
weixin_39583162的博客
06-02 2600
哪种方法？您可以使用< audio>播放音频。标签或< object>或< embed>。延迟加载(当你需要它的负载)的声音是最好的方法，如果它的大小很小。您可以动态创建音频元素，当它加载时，您可以用.play()启动它，并用.pause()暂停它。我们使用的东西我们将使用canplay事件来检测我们的文件是否可以播放。音频元素没有.stop()函数。我们只能暂...
jq实现音乐暂停播放
fxc6666的博客
11-24 908
jq实现音乐暂停播放 $('.open').click(function(){//点击次执行函数 audios() }) function audios(){ console.log($('#aud')) var play=$('#aud')[0]//将音乐转换成数组 console.log(play) if(play.paused){//如果音乐已经暂停了 play.play()//就播放 $('.open span').text
JS：防抖与节流函数的实现与应用
最新发布
qq_45820271的博客
06-29 105
防抖：一连串操作只执行一次。通过设置一个延迟时间，如果这段时间没有再次执行操作则运行目标函数，否则重新计时。
jquery 音乐播放器
11-30
以下是一个基于jQuery库实现的音乐播放器的示例代码： ```html <!DOCTYPE html> <html> <head> <title>jQuery音乐播放器</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ var audio = $("#audio")[0]; var playlist = ["music1.mp3", "music2.mp3", "music3.mp3"]; var index = 0; var mode = 0; // 0:单曲循环 1:随机播放 2:循环播放 // 播放/暂停 $("#play-pause").click(function(){ if(audio.paused){ audio.play(); $(this).html("暂停"); } else { audio.pause(); $(this).html("播放"); } }); // 上一曲 $("#prev").click(function(){ if(mode == 1){ index = Math.floor(Math.random() * playlist.length); } else { index = (index - 1 + playlist.length) % playlist.length; } audio.src = playlist[index]; audio.play(); }); // 下一曲 $("#next").click(function(){ if(mode == 1){ index = Math.floor(Math.random() * playlist.length); } else { index = (index + 1) % playlist.length; } audio.src = playlist[index]; audio.play(); }); // 播放模式 $("#mode").click(function(){ mode = (mode + 1) % 3; if(mode == 0){ $(this).html("单曲循环"); } else if(mode == 1){ $(this).html("随机播放"); } else { $(this).html("循环播放"); } }); // 音乐列表 $("#playlist").click(function(){ var list = ""; for(var i = 0; i < playlist.length; i++){ if(i == index){ list += "<li class='active'>" + playlist[i] + "</li>"; } else { list += "<li>" + playlist[i] + "</li>"; } } $("#list").html(list); $("#list li").click(function(){ index = $(this).index(); audio.src = playlist[index]; audio.play(); $("#play-pause").html("暂停"); $("#list li").removeClass("active"); $(this).addClass("active"); }); }); }); </script> <style> #playlist { cursor: pointer; } #list li.active { color: red; } </style> </head> <body> <audio id="audio" src="music1.mp3"></audio> <button id="prev">上一曲</button> <button id="play-pause">暂停</button> <button id="next">下一曲</button> <button id="mode">单曲循环</button> <div id="playlist">播放列表</div> <ul id="list"></ul> </body> </html> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值