web前端入门到实战：HTML5之audio属性

最新推荐文章于 2024-10-09 11:50:19 发布
最新推荐文章于 2024-10-09 11:50:19 发布
阅读量782 收藏 1
点赞数 1
分类专栏： html 文章标签： 编程语言 css Html 前端 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ITHHH111/article/details/105636467
版权
本文介绍了HTML5中audio元素的主要音频格式支持，包括mp3、ogg和wav，详细讨论了它们的浏览器兼容性。此外，还提到了audio标签的autoplay属性及其在谷歌和欧朋浏览器中的限制，并指出不能像video那样即使设置静音也能自动播放。同时，文章建议使用JS生成audio对象并通过style来调整其尺寸。
摘要由CSDN通过智能技术生成

audio主要支持的音频格式：

mp3  ogg wav

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>audio</title>
</head>
<body>
    <!-- 方法一 -->
    <audio controls>
        <source src="data/imooc.mp3"></source>
    </audio>

    <!-- 方法二 -->
    <audio controls src="data/imooc.mp3"></audio>
</body>
</html>

source的级别没有直接在audio中写src高

关于兼容性：

mp3 所有浏览器都兼容

ogg  safari浏览器不兼容，其他都可

wav 所有浏览器都兼容

可以使用JS生成audio对象


专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到WEB前端项目实战教程，学习工具，全栈开发学习路线以及规划）

    <button id="btn">play</but
最低0.47元/天 解锁文章
白T恤架构师
关注
专栏目录
HTML5前端开发入门之video/audio标签
qq_41886761的博客
12-19 677
##video标签 1.什么是video标签？ 作用：播放视频   格式1： &lt;video src=""&gt; &lt;/video&gt;   video标签的属性： src：用于告诉video标签需要播放的视频地址 autoplay:用于告诉video标签是否需要自动播放视频 controls：用于告诉video标签是否需要控制条 poster：用于告诉vide...
web前端入门到实战：HTML5 audio API事件
前端工程师年薪30万，就靠这套教程！持续更新最新知识
04-20 326
audio API 事件 play() 视频播放 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>audio</title> <style> audio{ width:500px; ...
/audio~ 前端音浪来袭：HTML音频&视频标签的深度探索
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-19 863
想要音频自动播放、循环播放，甚至静默加载？小菜一碟：< audio controls autoplay loop preload = " auto " > < source src = " ambient.mp3 " type = " audio/mpeg " > 准备好享受氛围音乐了吗？
audio.js：打造网页自定义音频播放体验
最新发布
weixin_42284380的博客
10-09 951
本文还有配套的精品资源，点击获取 简介： audio.js 是一个为网页提供简单和直观API的JavaScript库，用于添加自定义音频播放功能。它支持跨浏览器兼容性，即使在不支持HTML5 <audio> 元素的浏览器中，也能通过Flash技术实现音频播放。提供简洁的播放控制接口、自定义样式选项，并能够监听常见的音频事件。通过引入库...
播放音频
wangyongqi的博客
12-04 925
第1关：HTML5音频相关的概念 任务描述 本关任务：完成一组有关audio元素及属性的概念题。 相关知识 为了完成本关任务，你需要掌握：1.支持audio元素的音频格式，2.audio元素及其属性。 支持audio元素的音频格式 HTML5使用元素用来播放音频，目前元素支持三种音频编码。 WAV：为微软公司(Microsoft)开发的一种声音文件格式，采用44.1K的取样频率，16位量化数字，声音文件质量和CD相差无几。 MP3：是一种音频压缩技术，用来大幅度地降低音频数据量。将音乐以1:10甚至1:12
Web Audio介绍
weixin_33705053的博客
12-31 176
Web Audio还是一个比较新的JavaScript API，它和HTML5中的&lt;audio&gt;是不同的，简单来说，&lt;audio&gt;标签是为了能在网页中嵌入音频文件，和播放器一样，具有操作界面，而Web Audio则是给了开发者对音频数据进行处理、分析的能力，例如混音、过滤等，类似于对音频数据进行PS。 一般的网站应用应该是用不倒这些API中...
audio案例，前端开发路线
2401_83739777的博客
03-30 615
)//播放时间function timeChange(time, timePlace) {//默认获取的时间是时间戳改成我们常见的时间格式//分钟//秒//播放事件监听audio.addEventListener(“loadeddata”, //歌曲一经完整的加载完毕( 也可以写成上面提到的那些事件类型)$(“#control”).html(“点击播放”);//歌曲加载之后才可以拖动进度条}, 1000);clicks();}, false);
web前端入门到实战：HTML5的video和audio
软件开发-前端开发-IT
09-05 289
从理论上来说，HTML5引入的和元素，使用起来和元素一样简单。对于支持HTML5的浏览器，不再需要使用插件（像flash）来在HTML文档中嵌入音频和视频： <audio src="background_music.mp3"'> <video src="news.mov" width=320 height=240> 实际上，使用这些元素的时候要更加巧妙。由于各家浏览器制造...
web前端入门到实战：HTML5 VideoAPI，打造自己的Web视频播放器
软件开发-前端开发-IT
10-11 2905
本文将使用HTML5提供的VideoAPI做一个自定义的视频播放器，需要用到HTML5提供的video标签、以及HTML5提供的对JavascriptAPI的扩展。 一、基础知识 1.用法 <video src="./video/mv.mp4"></video> 注意：audio和video元素必须同时包含开始和结束标签，不能使用 2.重要HTML属性 control...
web前端入门到实战：HTML5文档类型如何定义，有哪些标签，以及如何使用，从整体认识HTML5
前端工程师年薪30万，就靠这套教程！持续更新最新知识
04-16 286
html5新增结构标签 header 头部 nav 导航 section 区域 article 文章 aside 侧边栏 figure 一组多媒体内容 figcaption 多媒体内容的标题 footer 底部 hgroup 区块的相关信息 dialog 对话框 / 会话框 sublime安装emmet插件，可以使用tab键快速补全标签 专门建立的学习Q-q-u-n： 784783012 ，分享学...
前端基础之HTML5音视频标签（video/audio）讲解
郭育培的博客
08-13 7252
前端基础之HTML5音视频标签（video/audio）讲解
前端第三章：2.audio标签：将音频引入浏览器；video标签：将视频引入浏览器
励志成为会前后端、运维、云服务、嵌入式开发、AI和自动化技术的创业小老板！
04-26 1197
一、audio标签及属性1.audio标签写法：1.1 写法一：<audio src="音频文件的路径"></audio>1.2 写法二：<audio><source src="音频文件的路径"> </audio> 2.audio标签的属性： · controls：是一个没有值的属性，用于让用户能够控制播放器 · autoplay：是一个没有值的属性，用于自动播放（这个属性不太好用） · loop：是一个没有值的属性
前端播放音频【vue，audio】
热门推荐
qq_22841387的博客
02-24 1万+
在这篇博客中，我们探讨了如何在前端处理后端传来的二进制音频数据，并将其转换为可播放的 MP3 文件。在解决过程中，我们尝试了多种方法，最终通过axios请求 URL 的方式成功实现了音频播放。这种方法简单直接，适用于多种场景，希望对大家有所帮助。
webAudio
眷恋天空的驴
03-17 385
base64转blob类型如何显示在页面上
qq_44162778的博客
02-23 698
//urlData 传base64 //type 图片类型 传 “image/png” // 调用方法 图片放置的参数 = URL.createObjectURL(this.base64ToBlob(base64,“image/png”))； base64ToBlob(urlData, type) { let arr = urlData.split(’,’); let mime = arr[0].match(/????.*?);/)[1] || type; // 去掉url的头，并转化为byte let
【前端标签-audio】网页播放一个音频和多个音频
JsonCC的博客
03-06 7188
标签的属性 项目 | Value | KDJ回复 -------- | ----- 电脑 | $1600 手机 | $12 导管 | $1 Column 1 Column 2 centered 文本居中 right-aligned 文本居右 属性 | 值 | 描述 |–|--| | | | 属性 值 描述 autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。 controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。 .
【前端】使用Web Audio API 技术播放音乐
qq_2511276124的博客
03-27 3598
音频节点通过它们的输入输出相互连接，形成一个链或者一个简单的网。一般来说，这个链或网起始于一个或多个音频源。这些节点的输出可以连接到其他节点的输入上，然后新节点可以对接收到的采样数据再进行其他的处理，再形成一个结果流。最后节点流再输出。音频节点就是 AnalyserNode、GainNode 、AudioContext 对象等。
前后端实现audio播放功能
y_edu的博客
06-17 1903
前端audio资源从后端接口获取，后端实现： /** * 播放音频 * * @param request 请求 * @param response 响应 * @param path 音频地址 * @return */ @GetMapping("/player") public void getMusic(HttpServletRequest request, HttpServletResponse respons
前端audio标签导致后端文件无法删除
y_edu的博客
06-15 377
业务背景： 客户要求完成音频生成之后，如果退出当前页面，则将后端生成的音频删除； 现象： 前端加载audio标签之后，然后退出，调用后端删除音频接口，此时后端调用file.delete会返回false，删除失败； 问题排查： 由于前端加载audio的时候，会去获取播放的文件流，但是前端audio标签是分成两段加载流，第一段获取音频头文件，第二段才是获取音频内容。所以当加载完音频，但是未播放时，http连接会保持，直到音频主体传送完成 此时问题便发生了：未播放音频，但是退出，删除音频会导致文件无法删除； /*
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值