• 售前

  • 售后

热门帖子
入门百科

利用HTML5实现利用按钮控制配景音乐开关

[复制链接]
看不清从bm 显示全部楼层 发表于 2021-10-26 13:44:18 |阅读模式 打印 上一主题 下一主题
效果图如下所示:

查看演示效果    源码下载

HTML
创建一个HTML5页面,放置<audio>标签,设置音频文件源,设置循环播放。预备两张图片,分别表示开启和暂停配景音乐两种状态,可以点击。

XML/HTML Code复制内容到剪贴板
       
  • <audio id="music2" src="music.mp3"  loop="loop">你的欣赏器不支持audio标签。</audio>        
  • <a href="javascript:playPause();"><img src="pause.gif" width="48" height="50" id="music_btn2" border="0"></a>  
Javascript
我们在点击开关图片按钮的时间调用了javascript脚本,playPause()函数。函数中判断audio音频播放状态,如果已经制止(paused)则调用.play()继续播放,如果是在播放状态,则立刻暂停播放.pause(),两种状态切换时实时更新按钮图片,请看代码:
JavaScript Code复制内容到剪贴板
       
  • function playPause() {        
  •     var music = document.getElementById('music2');        
  •     var music_btn = document.getElementById('music_btn2');        
  •     if (music.paused){        
  •         music.play();        
  •         music_btn.src = 'play.gif';        
  •     }        
  •     else{        
  •         music.pause();        
  •         music_btn.src = 'pause.gif';         
  •     }        
  • }   
如果使用jQuery代码可以如许写:

JavaScript Code复制内容到剪贴板
       
  • <audio id="music" src="http://cctv3.qiniudn.com/zuixingfuderen.mp3" autoplay="autoplay" loop="loop">你的欣赏器不支持audio标签。</audio>        
  • <a id="audio_btn"><img src="play.gif" width="48" height="50" id="music_btn" border="0"></a>        
  • <script>        
  • $("#audio_btn").click(function(){        
  •     var music = document.getElementById("music");        
  •     if(music.paused){        
  •         music.play();        
  •         $("#music_btn").attr("src","play.gif");        
  •     }else{        
  •         music.pause();        
  •         $("#music_btn").attr("src","pause.gif");        
  •     }        
  • });        
  • </script>   

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作