项目笔记之html和jsp页面音频文件的显示

最新推荐文章于 2023-03-03 09:12:59 发布

向往生活的码农

最新推荐文章于 2023-03-03 09:12:59 发布

阅读量275

点赞数

分类专栏：项目笔记

本文链接：https://blog.csdn.net/weixin_43790879/article/details/103569691

版权

项目笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

业务需求

需要在页面上实现音频的播放

需求例图

在这里插入图片描述
代码实现：


<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<audio controls>
  //<source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

</body>
</html>

src里面引入你要播放的音频即可，根据你音频格式来确定type的类型，
把此代码引入到你的项目中即可实现

引入案例代码：

//添加事件回显文件
function showAudio(cellvalue){
                return "<audio controls style='height: 20px;width:200px'>\n" +
                "  <source src='${pageContext.request.contextPath}/mp3/"+ cellvalue +"'  type=\"audio/mpeg\">\n" +
                "</audio>";
            }