最终测试页页面

测试页面html代码(test.html)

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>声音播放测试页面</title>  <script src="soud.js"></script></head><body><p>中</p><p>zhōng<a herf=":;" url="http://appcdn.fanyi.baidu.com/zhdict/mp3/zhong1.mp3" class="soundplay"></a></p><p>zhòng<a herf=":;" url="http://appcdn.fanyi.baidu.com/zhdict/mp3/zhong4.mp3" class="soundplay"></a></p> </body>
</html>

js文件代码(soud.js)

//设置样式,添加点击播放事件
window.onload = function(){/**var csslink = document.createElement('link');csslink.setAttribute('type','text/css');csslink.setAttribute('rel','stylesheet');csslink.setAttribute('href','soud.css');document.head.appendChild(csslink); **/var head=document.head || document.getElementsByTagName('head')[0];head.innerHTML +='<link type="text/css" rel="stylesheet" href="cidiansoud.css">'; var soundplay=document.getElementsByClassName("soundplay");    for(var i=0;i<soundplay.length;i++){soundplay[i].onclick=function(){new Audio(this.getAttribute("url")).play();};}
}

css文件代码(sound.css)

.soundplay {display: inline-block;*display: inline;*zoom: 1;background-image:url(data:image/png;base64,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);background-repeat: no-repeat;height: 18px;width: 18px;margin:0 2px; text-decoration: none;vertical-align: middle;background-position: 0 1px;cursor: pointer;user-select: none;background-size: auto 100%;-moz-background-size: auto 100%;
}

原生js声音播放代码相关推荐

  1. JavaScript 练手的小案例01:原生JS音乐播放器

    温故而知新.今天重新将老师教过的东西拿出来翻新翻新,稳固加深知识理解程度. 首先,使用HTML搭好我们的框架结构.这一步为了提高我们代码的可读性,多写注释. <!DOCTYPE html> ...

  2. JavaScript之事件委托(附原生js和jQuery代码)

    事件委托的原理依赖于事件冒泡,可以通过给父元素的事件委托来确定是哪个子元素触发了事件从而做一系列操作. 使用事件委托的优点 1.操作子元素时不用一一遍历,可以根据事件触发的对象而进行相应操作 dom结 ...

  3. 原生js追加html代码,原生js实现给指定元素的后面追加内容

    复制代码 代码如下: var header1 = document.getElementById("header"); var p = document.createElement ...

  4. 原生js实现播放器操作(随机播放、上/下一首、播放/暂停)

    <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

  5. span的取值与赋值(原生js与jquery) - 对比篇

    文章目录 关于span的取值与赋值 - 原生js与jquery代码 一. span的`取值`: 1. `javascript` 2. `jquery` 二. span的`赋值`: 1. `javasc ...

  6. js 封装ajax方法吗,原生JS封装ajax方法

    jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只需要ajax,这时引入jquery库会造成资源浪费,也会显得页面臃肿.这时我们就 ...

  7. 黄聪:原生js的音频播放器,兼容pc端和移动端(原创)

    更新时间:2018/9/3 下午1:32:54 更新说明:添加音乐的loop设置和ended事件监听 loop为ture的时候不执行ended事件 1 2 3 4 5 6 7 8 9 10 11 12 ...

  8. HTML+CSS+原生JS写一个简易的音乐播放器(仅播放一首歌)

    用HTML+CSS+原生JS写一个简易的音乐播放器(仅播放一首歌) 效果如下:(鼠标点击按钮可以实现播放或暂停,按钮会旋转,实现了歌词同步,功能还需改进) 代码如下: <!DOCTYPE htm ...

  9. 深圳java培训:使用原生JS重构简单的音乐播放器

    深圳java培训:使用原生JS重构简单的音乐播放器 上次,我们使用Jquery开发了一款简单的音乐播放器(如下图), 后来学生希望能够用原生的JS重构一次, 那么,下面就来看看如何使用原生的JS重构吧 ...

最新文章

  1. 剑指offer 40.最小的 K 个数 python代码
  2. 仅需10分钟:开启你的机器学习之路
  3. Percona Cluster集群讲解
  4. 基于JavaWeb实现ATM机系统
  5. 一位老工程师的终告 (推荐)
  6. 文巾解题 319. 灯泡开关
  7. 导购电商成虎头蛇尾,真的不只是因为拼多多
  8. picturectrl控件中加载图片并显示_如何在EasyX窗体中显示图片
  9. Fedora 11 Beta 跳票了
  10. openwrt 编译c语言,编译一个可以运行在openwrt上的c程序
  11. 夯实Java基础(八)——代码块
  12. atomic_fetch_add
  13. 自己编写的一个代码统计的小工具
  14. nas共享服务器怎么同步文件,如何轻松在两个NAS之间文件同步?
  15. 30【源码】数据可视化大屏:基于 Echarts + Python Flask 实现的32-9超宽大屏 - 中国国际疫情实时追踪
  16. Xshell“所选的用户密钥未在远程主机上注册”解决办法
  17. 麦森数 OpenJ_Bailian - 2706
  18. java返回图片base64_java将图片转为base64返回给前端
  19. iPhone手机拍的图片为什么电脑上打不开?秒懂
  20. IMU(LPMS-B2) ROS下使用教程

热门文章

  1. 技术分享|前端性能 关键性能指标以及测量工具介绍
  2. 解答网友提问:如何构建动态表达式实现高级查询服务
  3. .NET6又出新版本,新增这几个大杀器!
  4. WPF实现下拉框带图文和水印
  5. .Net Core WebAPI + Axios +Vue 实现下载与下载进度条
  6. 在龙芯上调试CoreCLR
  7. 远程办公也可以很高效
  8. Docker(二)-在Docker中部署Nginx实现负载均衡(视频)
  9. 面试必谈的哈希,.Net 程序员温故而知新
  10. C# 内存的理解 通俗说