html+mp3功能的简单实现
时间:2020-01-08
本文章向大家介绍html+mp3功能的简单实现,主要包括html+mp3功能的简单实现使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
首先引入一个文件
引入一个mp3文件到static/mp3文件夹下
然后在html里引入这个mp3文件,注意了,这里引入的时候,不要把html的音乐标签写成js嵌入html的形式,而是直接写入到html里面去,
因为html里面引用文件用的thymeleaf模板的th:src 只能引入静态的好像,不能引入动态的,我也是调试到html里面才成功播放音乐的
</div> <audio id='audioPlay' th:src='@{/mp3/user_download.mp3}' hidden='true'/> <embed name="embedPlay" th:src='@{mp3/user_download.mp3}' autostart="true" hidden="true" loop="false"></embed> </body>
类似于这样,
然后文件播放的js代码在如下
var playSound = function () { var borswer = window.navigator.userAgent.toLowerCase(); if ( borswer.indexOf( "ie" ) >= 0 ) { //IE内核浏览器 var embed = document.embedPlay; //浏览器不支持 audion,则使用 embed 播放 embed.volume = 100; embed.play(); sleep(3000); } else { var audio = document.getElementById("audioPlay"); //浏览器支持 audio audio.play(); sleep(3000); } };
直接调用就好了,这里注意了,这里加一段睡眠时间的代码,我的音乐文件大概休眠3秒钟就可以播放完毕了,
如果不加的话,也是没办法播放的,直接就跳过去了。
function sleep(numberMillis) { var now = new Date(); var exitTime = now.getTime() + numberMillis; while (true) { now = new Date(); if (now.getTime() > exitTime) return; } }
好了这里就是一个简单的播放音乐文件的代码了,祝小伙伴们学习愉快!
原文地址:https://www.cnblogs.com/Koaler/p/12166583.html
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Python Django开发 异常及其解决办法(二)
- C#参数类型总结
- C++ stringstream 实现字符与数字之间的转换
- C语言入门系列之8.指针的概念与应用
- 宝塔面板升级没有成功怎么办
- C语言经典习题100例(十)46-50
- 5.21排序与检索
- 建议收藏 | Linux常用命令
- 浅谈常见数据结构和算法的应用系列(一)
- 利用Python进行远程关电脑
- C语言入门系列之10.结构体和共用体
- Django+Vue开发生鲜电商平台之4.Restful API和Vue介绍
- 分别用逻辑回归和决策树实现鸢尾花数据集分类
- Django+Vue开发生鲜电商平台之3.数据模型设计和资源导入
- Django+Vue开发生鲜电商平台之2.开发环境搭建