html制作有声效的按钮,让html播放声音(兼容ie6)
可以让某个按钮的点击事件关联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)相关推荐
- 纯CSS3制作的圆角效果按钮菜单
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...
- button按钮onclick触发不了_手把手教你深入CSS实现一个粒子动效的按钮
按钮(button)可能是网页中最常见的组件之一了,大部分都平淡无奇,如果你碰到的是一个这样的按钮,会不会忍不住多点几次呢? 转载链接: https://github.com/XboxYan/note ...
- 怎么实现hover_web前端CSS实现一个粒子动效的按钮
按钮(button)可能是网页中最常见的组件之一了,大部分都平淡无奇,如果你碰到的是一个这样的按钮,会不会忍不住多点几次呢? 通常这类效果第一反应可能就是借助canvas了,比如下面这个案例点击预览( ...
- Django上传文件,制作文件上传按钮,form上传文件
Django上传文件,制作文件上传按钮,form上传文件 from django.shortcuts import renderfrom django.shortcuts import HttpRes ...
- 用Coreldraw制作晶莹剔透苹果风格按钮(转)
用Coreldraw制作晶莹剔透苹果风格按钮(转)[@more@] 浏览过苹果公司主页的人,想必对其晶莹剔透,流光溢彩的网页按钮有深刻的印象(图0).记得看过介绍制作苹果风格按钮的文章,不过那是用PH ...
- Bootstrap 教程第四课:制作一组功能图标按钮
上一节内容,我们讲到在Bootstrap中,如何使用文字图标制作带有图标的按钮( Bootstrap教程第三课:制作有图标的按钮),这节课,我们将在上一节的基础上,进行一组功能图标按钮的制作. 我们以 ...
- AE+PS如何制作动效图
站酷链接:https://www.zcool.com.cn/u/15028740 一.首先自己画(准备)好AI素材源文件:画好素材--把需要制作动效的部分新建图层从大图层里分离出来(为了好区分最好命名 ...
- BonBon - 使用 CSS3 制作甜美的糖果按钮
BonBon 是一组使用 CSS3 制作的甜美的糖果按钮样式.在过去,我们都是使用图片或者 JavaScript 来实现漂亮的按钮效果,随着越来越多的浏览器对 CSS3 的支持和完善,使用 CSS3 ...
- 大众都在用FLBOOK平台制作有声朗读电子书
先看一段视频: QQ录屏20230719102543 怎么样?效果是不是很nice,不仅缓解疲劳,节约用眼.节省时间,还能增添很多乐趣! 想知道怎么制作吗? 我有一个方法可以供大家见解,FLBOOK大 ...
最新文章
- 用 tap/tun 做虚拟机的网卡
- 基础知识:数字、字符串、列表 的类型及内置方法
- CodeForces - 1220B Multiplication Table(思维)
- 配置window下python3环境
- 安装npm_微信小程序使用npm安装第三方库
- 数据结构与算法之循环队列的操作
- 小学三年级计算机基础知识课件,小学三年级信息技术基础知识ppt课件.ppt
- 【转】在 2016 年做 PHP 开发是一种什么样的体验?(一)
- mac的 上传到linux服务器地址,【mac 怎么登录到 linux 服务器并传输文件?】-看准网...
- .net core websocket
- 无监督学习 k-means_无监督学习-第5部分
- 四十一 Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)基本的索引和文档CRUD操作、增、删、改、查...
- Ubuntu和Win10双系统修改硬盘序列号后无法进入Win10的解决办法
- 使用Zip命令进行本地提权(类Unix系统)
- 信息加密技术——对称密码体制
- Allegro PCB Design GXL (legacy) - 设置旋转角度的快捷键
- 2022年茶艺师(初级)考试题模拟考试题库及模拟考试
- 万能用户名和万能密码
- Prince and Princess HDU - 4685
- python股票量化交易(8)---K线图:锤头,射击之星,早晨之星