可以让某个按钮的点击事件关联playSound()方法,做出“有声音效过的”按钮

注意:系统需要安装flash的activeX控件,可以到这里下载http://pan.baidu.com/s/1bntOC1L

参考如下代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Audio test</title>
        <script type="text/javascript">
            // @param filename The name of the file WITHOUT ending
           
function playSound(filename){   
                document.getElementById("sound").innerHTML='<audio autoplay="autoplay"><source src="' + filename + '.mp3" type="audio/mpeg" /><source src="' + filename + '.ogg" type="audio/ogg" /><embed hidden="true" autostart="true" loop="false" src="' + filename +'.mp3" /></audio>';
            }

</script>
</head>
<body>
<button οnclick="playSound('bing');">Play</button>
<div id="sound"></div>
</body>
</html>
上面这段代码,javascript会生成如下html:
<body>
<button οnclick="playSound('bing');">Play</button>
<div id="sound">
<audio autoplay="autoplay">
<source src="bing.mp3" type="audio/mpeg">
<source src="bing.ogg" type="audio/ogg">
<embed hidden="true" autostart="true" loop="false" src="bing.mp3">
</audio>

</div>
</body>

html制作有声效的按钮,让html播放声音(兼容ie6)相关推荐

  1. 纯CSS3制作的圆角效果按钮菜单

    <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...

  2. button按钮onclick触发不了_手把手教你深入CSS实现一个粒子动效的按钮

    按钮(button)可能是网页中最常见的组件之一了,大部分都平淡无奇,如果你碰到的是一个这样的按钮,会不会忍不住多点几次呢? 转载链接: https://github.com/XboxYan/note ...

  3. 怎么实现hover_web前端CSS实现一个粒子动效的按钮

    按钮(button)可能是网页中最常见的组件之一了,大部分都平淡无奇,如果你碰到的是一个这样的按钮,会不会忍不住多点几次呢? 通常这类效果第一反应可能就是借助canvas了,比如下面这个案例点击预览( ...

  4. Django上传文件,制作文件上传按钮,form上传文件

    Django上传文件,制作文件上传按钮,form上传文件 from django.shortcuts import renderfrom django.shortcuts import HttpRes ...

  5. 用Coreldraw制作晶莹剔透苹果风格按钮(转)

    用Coreldraw制作晶莹剔透苹果风格按钮(转)[@more@] 浏览过苹果公司主页的人,想必对其晶莹剔透,流光溢彩的网页按钮有深刻的印象(图0).记得看过介绍制作苹果风格按钮的文章,不过那是用PH ...

  6. Bootstrap 教程第四课:制作一组功能图标按钮

    上一节内容,我们讲到在Bootstrap中,如何使用文字图标制作带有图标的按钮( Bootstrap教程第三课:制作有图标的按钮),这节课,我们将在上一节的基础上,进行一组功能图标按钮的制作. 我们以 ...

  7. AE+PS如何制作动效图

    站酷链接:https://www.zcool.com.cn/u/15028740 一.首先自己画(准备)好AI素材源文件:画好素材--把需要制作动效的部分新建图层从大图层里分离出来(为了好区分最好命名 ...

  8. BonBon - 使用 CSS3 制作甜美的糖果按钮

    BonBon 是一组使用 CSS3 制作的甜美的糖果按钮样式.在过去,我们都是使用图片或者 JavaScript 来实现漂亮的按钮效果,随着越来越多的浏览器对 CSS3 的支持和完善,使用 CSS3 ...

  9. 大众都在用FLBOOK平台制作有声朗读电子书

    先看一段视频: QQ录屏20230719102543 怎么样?效果是不是很nice,不仅缓解疲劳,节约用眼.节省时间,还能增添很多乐趣! 想知道怎么制作吗? 我有一个方法可以供大家见解,FLBOOK大 ...

最新文章

  1. 用 tap/tun 做虚拟机的网卡
  2. 基础知识:数字、字符串、列表 的类型及内置方法
  3. CodeForces - 1220B Multiplication Table(思维)
  4. 配置window下python3环境
  5. 安装npm_微信小程序使用npm安装第三方库
  6. 数据结构与算法之循环队列的操作
  7. 小学三年级计算机基础知识课件,小学三年级信息技术基础知识ppt课件.ppt
  8. 【转】在 2016 年做 PHP 开发是一种什么样的体验?(一)
  9. mac的 上传到linux服务器地址,【mac 怎么登录到 linux 服务器并传输文件?】-看准网...
  10. .net core websocket
  11. 无监督学习 k-means_无监督学习-第5部分
  12. 四十一 Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)基本的索引和文档CRUD操作、增、删、改、查...
  13. Ubuntu和Win10双系统修改硬盘序列号后无法进入Win10的解决办法
  14. 使用Zip命令进行本地提权(类Unix系统)
  15. 信息加密技术——对称密码体制
  16. Allegro PCB Design GXL (legacy) - 设置旋转角度的快捷键
  17. 2022年茶艺师(初级)考试题模拟考试题库及模拟考试
  18. 万能用户名和万能密码
  19. Prince and Princess HDU - 4685
  20. python股票量化交易(8)---K线图:锤头,射击之星,早晨之星

热门文章

  1. 鸟哥的私房菜(第四版)----高清---免费!!!!
  2. html页面分为三大部分,web标准主要三大部分
  3. 计算机类SCI/SSCI/EI期刊征稿通知
  4. Xilinx FPGA FFT 应用笔记
  5. Android培训班(47)
  6. 项目管理永远是资源少,时间不够,需求不断变化……
  7. linux 给目录建立软连接
  8. 地图格子 java_地图纠偏java算法
  9. 希望之路:元旦有点无聊
  10. 2023年淮阴工学院五年一贯制专转本应用文写作考试大纲