首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Tone.js —— Web Audio 框架中文使用指南

Tone.js 是一个Web Audio框架,用于浏览器创建交互式音乐。Tone.js旨在使音乐家和基于Web Audio 应用程序的音频程序员都能熟悉应用。...该值可以以秒为单位,也可以作为一个时间相对值。triggerAttackRelease的第三个(可选)参数是音符AudioContext时间内应该播放的时间。它可以用于计划未来事件。...Starting Audio 启动音频浏览器不会播放任何音频,直到用户点击某些东西(如播放按钮)。...Tone.start()返回一个承诺,只有该承诺被解决后,音频才会准备好。AudioContext运行之前调度或播放音频将导致静默或不正确的调度。...AudioContext可以Tone.context访问。或者使用Tone.setContext(AudioContext)设置自己的AudioContext。

34510

这 7 个大部分人不知的自带功能,能让 Chrome 变得很好用

近乎无限制的桌面平台也让其可以第一时间运用起新的功能和技术,这也是限制重重的移动端 Chrome 所无法比拟的。 当然因为桌面端 Chrome 的广泛使用性,新功能的推出和运用反而会更为谨慎。...,所以相比移动端,桌面端开启并行下载功能要更为迫切一些。...奇怪的是这个功能在桌面端的 Chrome 依旧被隐藏在 flag 开启方式是 Chrome Flags 中找到「Enable Reader Mode 」来开启这个功能,打开之后重启浏览器地址栏的最右侧会出现一个新的图标...开启方法也很简单,同样是 Chrome Flags 搜索「 Global Media Controls 」找到之后选择「Enable」重启浏览器,这时候你打开一个视频播放页面并播放视频,同时工具栏中就会出现一个多媒体按钮...这项早已出现在经典版 Edge 浏览器上的功能在 Chrome 竟然也是隐藏功能,开启方式当然还是 Chrome Flag —— 搜素「Tab Hover Card Images」选择开启就可以看到效果了

66420
您找到你想要的搜索结果了吗?
是的
没有找到

TRTC Web SDK + 播放器 Web SDK 实现 CDN 直播观看

使用腾讯的TRTC Web SDK可以Web端实现主播的直播流推送和观众的拉流观看,但是由于 TRTC 采用 UDP 协议进行传输音视频数据,直播时可能会遇到一些问题: 1、高并发观看问题...2、移动端网页播放 TRTC 虽然支持 WebRTC 协议接入,但主要用于 Chrome 桌面浏览器移动浏览器的兼容性非常不理想,尤其是 Android 手机浏览器对 WebRTC 的支持普遍都很差...所以如果希望通过 Web 页面移动端分享直播内容,还是推荐使用 HLS(m3u8) 播放协议,这也就需要借助直播 CDN 的能力来支持 HLS 协议。...CDN ,才能在让观众通过直播 CDN 进行观看。...HTTP-FLV、HLS 协议的直播视频,支持主要的桌面移动浏览器

6.5K00

如何利用免版税视频流技术构建优质视频体验?

此测试过程可在浏览器自行运作,方法是不同的浏览器中使用此链接,相关源代码可以Github上被找到。...容器仅使用VP8或VP8与Opus / Vorbis的组合,那么市场上大约有85%的浏览器可以完美支持正常的播放活动,市面上浏览器对MP4组合的支持率为95%,不得不说这样的结果令人印象深刻,并且还具有非常大的提升空间...编解码器测试 – 移动浏览器 虽然编码器支持85%以上的桌面浏览器,但由于绝大多数互联网流量都源自移动浏览器,因此市场占有率较高的几大移动浏览器上进行测试是十分有必要的。...,MP4仍可以在任何设备上播放但开源视频编解码器却无法iOS平台上成功播放,这意味着全世界最受欢迎的移动终端设备不支持开源视频编解码器。...Explorer,可以说OGV.js为开源编码器桌面端与移动端的全面覆盖做出了不可磨灭的贡献。

3.3K30

实时音视频开发学习14 - 常见问题

但录制结束后可以云点播平台自行下载至手机 7.TRTC 与移动直播后台方案架构不同,所以不支持直接相互通信,仅可从 TRTC 后台旁路推流到 CDN。...当用户要加入的房间不存在时,后台会自动创建一个房间 桌面浏览器问题 SDK支持哪些浏览器桌面版的Chrome浏览器、Safari浏览器以及移动版的Safari浏览器支持,可以通过WEBRTC能力测试浏览器是否支持...并且该错误产生的原因主要是因为浏览器2018年4月份就正式关闭了自动播放,并且声音无法自动播放在IOS/Android上无法自动播放也是一个常态。...我们可以手动的调用client对象的resume方法进行手动打开。事实上这并不会影响到实际的业务内容。 其它问题 直播、互动直播、实时音视频以及旁路直播有什么区别和关系?...旁路直播是一种技术,指的是将低延时连麦房间里的多路推流画面复制出来,云端将画面混合成一路,并将混流后的画面推流给直播 CDN 进行分发播放为什么线上的房间都进不去了?

2.6K20

Web端集成TRTC SDK、集成播放器SDK

WebRTC 技术由 Google 最先提出,目前主要在桌面版 Chrome 浏览器桌面版 Edge 浏览器桌面版 Firefox 浏览器桌面版 Safari 浏览器以及移动版的 Safari 浏览器上有较为完整的支持...例如, index.html 中加入如下代码(容器 ID 以及宽高都可以自定义)。...,传入准备工作获取到的 fileID(【媒资管理】的视频 ID)与 appID(【账号信息】>【基本信息】查看)。..."autoplay" : true, //iOS 下 safari 浏览器,以及大部分移动浏览器是不开放视频自动播放这个能力的 "poster" : "http://www.test.com...,用于PC平台的播放 请替换成实际可用的播放地址 "autoplay" : true, //iOS 下 safari 浏览器,以及大部分移动浏览器是不开放视频自动播放这个能力的 "poster

3.8K40

复杂帧动画之移动端video采坑实现

查看 video 标签的兼容性,无论是我们品牌页的 PC 版还是移动 web 端,兼容性都可以满足我们的需求 ?...video 标签有对应的事件方法, 可查阅文档 下面是移动端 web 使用 video 过程的采坑总结: video safari 和桌面端 chrome 可能无法自动播放 这里的自动播放,无论是...video 标签的 autoplay 属性还是通过 js 自动调用 video 的 play 方法都是自动播放 桌面端 chrome 自动播放主要受制于 autoplay policy ,遵循对应的策略则可以自动播放...这在不同 PC 设备存在差异,例如 MAC 与 windows , 移动端暂时还没发现,但是可以发现视频移动端展示与 PC 上展示的色彩差异 ?...如果用其它方式可以实现动画尽量还是用其它方式 对于 video 的自动播放,考虑一些浏览器限制必须通过用户交互才能使用,如果视屏是第一屏则有点难度,还是需要用户通过点击才能播放,如果不是第一屏则可通过

2.3K10

复杂帧动画之移动端video采坑实现

/zh-CN/docs/Web/Guide/Events/Media_events 下面是移动端 web 使用 video 过程的采坑总结: video safari 和桌面端 chrome 可能无法自动播放...;因为使用muted(静音)属性可以允许自动播放, 我们的动画本来就是没有声音的,所以 video 标签中加上 muted 属性 隐藏视频控制条 video 标签...这明显是不仁道的,尝试无果之后,于是我咨询 QQ 浏览器的同事帮忙这个问题, 他让我 video 标签上加上这个属性,即可使用系统播放器,拒绝被拦截植入推荐视屏, 感谢@eddiecmchen 提供的意见...mtt-playsinline=”true“ 设计师导出的视频背景色与提供的色彩有色差 这在不同 PC 设备存在差异,例如 MAC 与 windows , 移动端暂时还没发现,但是可以发现视频移动端展示与...如果用其它方式可以实现动画尽量还是用其它方式 对于 video 的自动播放,考虑一些浏览器限制必须通过用户交互才能使用,如果视屏是第一屏则有点难度,还是需要用户通过点击才能播放,如果不是第一屏则可通过

2.3K10

LinkedIn Feed流视频自动播放架构演进

播放窗口 桌面端的LinkedIn 视频Feed流情景下,视频会在用户浏览至播放窗口时迅速播放并在滑出播放窗口时暂停。...当用户滚动浏览器页面时,浏览器被迫重新计算随着页面滚动带来的DOM节点的移动与布局改变;如果在滚动事件的处理程序改变DOM节点,那么浏览器将再次被迫重新绘制页面,这会导致滚动事件处理程序执行DOM操作的成本显著提高...当我们在后台下载视频资源时,允许播放窗口下载视频数据的可用带宽较少;除了带宽问题之外,移动设备和桌面设备上的浏览器能够并行处理的HTTP请求数量十分有限。...队列系统的工作原理是将页面上的所有视频添加到队列,无论其是否视频窗口中,浏览器按照添加顺序加载队列的每个视频。...这直接关系着我们的会员浏览视频时的用户体验,如果使用得当,自动播放功能可以极大提升网站访问者的参与度。因为二十一世纪的网络用户渴望海量内容高效呈现在眼前,视频便是实现这种效果的绝佳媒介。

1.5K20

AirServer2023MAC电脑专用投屏软件功能介绍

AirServer电脑投屏工具是一款可以移动设备画面投屏到电脑上的软件工具,通过简单地扫描二维码,可以建立起同个局域网下移动设备与电脑的连接通道,并进行实时投屏。...图片 这款也是支持将移动设备投屏到Mac或Windows系统,画面简洁,可通过给定的二维码或者投屏进行连接,操作简便。...图片AirServer主要功能在于实时地将移动设备上的图像画面内容投放到电脑设备上,让电脑成为iPad、iPhone等iOS系统设备的大屏显示器。...AirServer您的环境运行,您可以使用任何设备,如iPhone,iPad,Mac,Android,Nexus,Pixel,Chromebook或Windows 10 PC,将其显示屏无线屏幕镜像到大屏幕...安装Google Chrome浏览器还支持Windows 75、Chromebook兼容AirServer 支持通过Google Chrome浏览器在所有Chromebook和所有桌面平台中内置的标签投射和桌面投射

1.4K00

Ubuntu Desktop基本办公环境搭建

如果是重度的office办公需求人员,建议使用linux desktop,建议使用windows,基本上所有的大型office的应用软件的最优体验方案都是windows上实现的。...视频播放 截图工具 邮件收发 即时聊天 网络硬盘 办公协作 网络笔记 2   Web浏览器 Ubuntu的软件中心里面,提供的Web浏览器有: Firefox火狐浏览器...Chrome开源版Chromium 如果想要下载稳定版的Chrome浏览器可以直接在Chrome官网上下载Linux平台的 Chrome稳定版, 基本上Web浏览器Linux上提供了和Windows...图形 GIMP图形编辑器 gThumb图像浏览器 音乐 Rhythmbox音乐播放器 视频 Totem电影播放机 Mplayer SMPlayer 6   截图工具 如今互联网技术迅猛应用的年代...其实如果用户纯粹是为了Linux下面办公,不是开发,则可以选择一些天然为桌面办公而开发的Linux桌面发行版,例如: Deepin Linux ,天然集成了上面所述的所有办公软件和影音软件,而且还集成了

2.6K60

【专业技术】使用html5的十大原因

当然我猜想你可能有自己的原因;它现在还没有被广泛的支持,IE不好使,或者你就是喜欢写比较严格的XHTML代码。...以前,即使你定义了class或者ID你的阅读者也没有办法去了解给出的一个div究竟是什么。使用新的语义学的定义标签,你可以更好的了解HTML文档,并且创建一个更好的使用体验。   ...最大的好消息在于,除了简单,它能在每一个浏览器中正常工作即使是名声狼藉的IE6。...: 就像桌面收藏,这些图标可以用来添加收藏到IOS和Android移动设备的首页。...如果你开发XHTML strict的话你现在就已经开发HTML5了。为什么更完整的享受HTML5的功能呢?   你实际上没有任何借口不接受HTML5。

649100

H5直播避坑指南

作者简介: 文赫,2015年加入腾讯,作为前端开发工程师参与过手Q游戏公会,游戏中心,企鹅电竞等项目,具有丰富的移动端开发和直播开发经验。 | 导语 企鹅电竞项目,直播和视频播放是其中的核心。...面对着产品同学不断的询问:为什么h5的体验这么差?为什么不能和app的播放体验保持一致?我们对着h5不明确的文档和不同浏览器的怪异表现欲哭无泪。...页面内联播放问题 iOS Safari和一些安卓的一些浏览器播放视频的时候,不能在h5页面播放视频,系统会自动接管视频 如果需要在h5页面内播放视频,需要在视频标签上加上 webkit-playsinline...如果发现在x5内核下无法使用伪全屏浏览器接管,可以咨询下x5同事为你的域名开启白名单,接管你域名下的视频播放 总结: 经历过各种优化和调整后,我们可以h5直播页做到看直播,看弹幕,发弹幕,发送礼物...现在的h5的播放还有很多的表现和兼容性的问题,希望这份指南可以帮你遇到同样的坑时能尽快爬出来,并优化你的h5播放体验,吸引到更多的用户 : D

10.8K151

实时音视频开发学习6 - 云端录制与回放

如在PC浏览器没看完的,不能再移动端进行续播或者另一个浏览器上续播。...这里需要注意的是选用的hls播放器版本为0.12.4,避免出现错误 镜像和进度条标记: 镜像标记通过ContextMenu,将mirror属性设置为true即可,进度条标记则通过ProgressMarker...移动端和桌面端大部分浏览器都支持该特性。 播放 HLS Master Playlist 时,播放器的清晰度选择功能将会变成选择特定的码率或者根据网络速度自动选择。...d.需要将播放器 swf URL 的域名添加到白名单内,开启了 Referer 防盗链的视频才能在 Flash 模式下播放。...d.开发者使用密钥KEY对视频 URL 签名,并在 URL 带上签名结果。只要用户密钥泄露,其他用户无法伪造视频 URL。

6.5K30

没有Flash如何做直播?

为什么不说客户端? 因为客户端上早就没有Flash,不会问这个问题。客户端上浏览器,比如微信的浏览器,如果要播放直播可以用HLS。如果是微信小程序,可以用RTMP的。...比较难,但是HLS延迟可以做一些优化,估计能到5秒左右,详细可以参考百毫秒超低延迟直播方案HLS延迟优化的配置。...如果选择了HTTP-FLV,那么移动端就不能用浏览器播放,但是移动可以用Fijkplayer播放,这是为了追求更低延迟要付出的兼容性代价。...直播业务,目前并没有经过大规模的验证,配套的东西也不如直播这么完善,比如微信小程序就没法用WebRTC了。...现在云服务也开始推出WebRTC直播服务,当然是可以用的,问题是云服务也支持HTTP-FLV,为什么选择更通用的方案?除非延迟要求非常低,比如1秒之内的延迟。

1.8K20

新版谷歌Chrome播放海康大华RTSP视频流解决方案

二、现有方案 未来也没有计划支持的情况下,想要在网页实现播放RTSP流,目前常用可选方案有以下3种: 1、先在服务器端把RTSP流转码到浏览器可直接播放的视频流后再提供给终端浏览器播放,这也是号称无插件播放的方法...因为现代高版本浏览器,都已经支持WASM技术(IE除外),所以纷纷采用此技术在前端实现将RTSP流转码后播放。由于终端电脑的硬件参差不齐,一些中低配电脑上,就很难获得比较好的播放效果。...3、沿用原有插件技术方案,2015年前Chrome等浏览器可以用NPAPI插件技术的时候,前2种方案遇到的问题都不是问题,通过本地原生播放器控件直接播放,服务器也没多少压力,终端也可以充分利用本机硬件加速能力...二、最终方案 猿大师中间件VLC网页播放小程序应需而生,基于跨浏览器的原生小程序系统-猿大师中间件开发,通过借助猿大师中间件提供的内嵌网页播放的独家专利技术,Chrome等现代浏览器高版本完全模拟实现了...猿大师中间件免费体验地址:http://www.yuanmaster.com/xiazai/ 采用猿大师中间件VLC网页播放小程序具有如下优点: 1、支持主流版本浏览器的前提下,是当前市场可实现低延迟

2.8K00

没有Flash如何做直播?

为什么不说客户端?因为客户端上早就没有Flash,不会问这个问题。客户端上浏览器,比如微信的浏览器,如果要播放直播可以用HLS。如果是微信小程序,可以用RTMP的。...看业务对平台的要求,跨平台要求很强就用HLS,比如要在PC和移动浏览器中都能播放那就要选HLS了。...如果选择了HTTP-FLV,那么移动端就不能用浏览器播放,但是移动可以用Fijkplayer播放,这是为了追求更低延迟要付出的兼容性代价。...直播业务,目前并没有经过大规模的验证,配套的东西也不如直播这么完善,比如微信小程序就没法用WebRTC了。...现在云服务也开始推出WebRTC直播服务,当然是可以用的,问题是云服务也支持HTTP-FLV,为什么选择更通用的方案?除非延迟要求非常低,比如1秒之内的延迟。

1.5K50

H5 直播避坑指南

导语 企鹅电竞项目,直播和视频播放是其中的核心。面对着产品同学不断的询问:为什么h5的体验这么差?为什么不能和app的播放体验保持一致?我们对着h5不明确的文档和不同浏览器的怪异表现欲哭无泪。...自动播放问题 通过autoplay属性 视频的自动播放需要在video标签上添加autoplay属性, 如: 但是很多浏览器里,如iOS下并不支持这个属性...页面内联播放问题 iOS Safari和一些安卓的一些浏览器播放视频的时候,不能在h5页面播放视频,系统会自动接管视频 如果需要在h5页面内播放视频,需要在视频标签上加上 webkit-playsinline...视频的高度问题 安卓下,一些浏览器如QQ浏览器和UC浏览器,系统会把视频的层级调到最高,所以如果想在页面上显示dom元素,都会被视频盖住,单纯的设置该dom的z-index是无效的,如图所示 ?...如果发现在x5内核下无法使用伪全屏浏览器接管,可以咨询下x5同事为你的域名开启白名单,接管你域名下的视频播放 总结: 经历过各种优化和调整后,我们可以h5直播页做到看直播,看弹幕,发弹幕,发送礼物

2.8K90

H5直播避坑指南

作者简介: 文赫,2015年加入腾讯,作为前端开发工程师参与过手Q游戏公会,游戏中心,企鹅电竞等项目,具有丰富的移动端开发和直播开发经验。 导语 企鹅电竞项目,直播和视频播放是其中的核心。...面对着产品同学不断的询问:为什么h5的体验这么差?为什么不能和app的播放体验保持一致?我们对着h5不明确的文档和不同浏览器的怪异表现欲哭无泪。...页面内联播放问题 iOS Safari和一些安卓的一些浏览器播放视频的时候,不能在h5页面播放视频,系统会自动接管视频 如果需要在h5页面内播放视频,需要在视频标签上加上 webkit-playsinline...如果发现在x5内核下无法使用伪全屏浏览器接管,可以咨询下x5同事为你的域名开启白名单,接管你域名下的视频播放 总结: 经历过各种优化和调整后,我们可以h5直播页做到看直播,看弹幕,发弹幕,发送礼物...现在的h5的播放还有很多的表现和兼容性的问题,希望这份指南可以帮你遇到同样的坑时能尽快爬出来,并优化你的h5播放体验,吸引到更多的用户 : D

5.4K130

2023年网页内嵌VLC直接播放RTSP视频流,无需转码,支持硬解,支持高版本Chome

2015年之前还可以用VLC原生播放Chrome、Firefox等浏览器中直接播放,延迟比较低,效果也还不错。...可惜好景不长,从 2015年Chrome、Firefox等浏览器取消了对 NPAPI插件的支持,海康威视官方提供的 web3.0开发包也只能在低版本浏览器播放。...猿大师播放器是目前来说最成熟的、延迟最低的网页播放摄像头RTSP视频流方案,基于猿大师中间件提供的内嵌网页播放的专利技术,底层调用VLC客户端的ActiveX控件可实现在Chrome等高版本浏览器内嵌播放海康威视...低延迟播放猿大师VLC播放程序基于基于VLC的ActiveX控件开发,完整封装了控件的所有接口给前端调用,在同等条件下,延迟时间和VLC桌面程序播放保持一致,并可支持多路播放。...,只要能输出RTSP、RTMP、HLS、HTTP、TCP、UDP等流媒体协议,就可以直接播放;支持多种视频编码方式,不管是H.264还是H.265都可以同时支持播放一些采用WASM的无插件技术方案

1.4K80
领券