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

JavaScript控制audio播放暂停

大概的需求就是要在网页里显示一个录音列表,要求可以播放,可以暂停,我当时一看,这也简单啊,直接异步请求后端,获取到录音文件地址通过audio播放就可以了。...但是怎么实现播放暂停呢,我就开始了我的各种尝试,因为是异步加载audio的src属性,基本上方法都用不了,哪怕是度娘上的方法,也基本上都用不了,直到有一个方法让我眼前一亮。...audio.src = url; audio.play(); return audio; } 然后,将函数保存到一个变量里面,就可以调用play()和pause()控制播放和停止了 var...playAudio = playAudio('播放的地址'); playAudio.play(); //播放 playAudio.pause(); //停止 雷霆嘎巴~~ 最后说一点,如果以后有人给你提了这种需求...,还是直接百度吧,别自己研究了(大佬除外~~~) 如无特殊说明《JavaScript控制audio播放暂停》为博主MoLeft原创,转载请注明原文链接为:https://moleft.cn/post-

4.8K20

js控制音频文件的播放暂停操作

需求 页面中加载两个音频文件,通过两个按钮进行播放,一个暂停开关。效果就不给大家做展示了。...audio> JS...代码 //男声播放 $("#MaleVoice").click(function () {    console.log("男声播放");    $("#MaleVoiceAudio").removeClass...1、这里面涉及到了一个open-this的类,主要是方便后期在进行暂停操作的时候,区分是男声、女声播放源; 2、获取audio的元素需要使用js来操作,在使用jQ时无法获取到; 3、播放状态使用元素...这里没有使用图标模式展示,大家可以自行扩展成播放图标。样式会更好看一下。这里再说一下,目前主流浏览器是无法自动播放声音的,防止出现流氓广告的问题。

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

JS控制Video播放器(快进、后退、播放暂停、音量大小)

:videoElement.currentTime 播放视频:videoElement.play() 暂停视频:videoElement.pause() 三.实际应用,直接上代码 1 //reurn...http://www.sundxs.com/test.mp4" controls width="400px" heigt="400px"> //audio和video都可以通过JS...获取对象,JS通过id获取video和audio的对象 2.获取video对象 Media = document.getElementById("media"); 3.Media方法和属性 HTMLVideoElement...; //是否自动播放 Media.loop; //是否循环播放 Media.play(); //播放 Media.pause(); //暂停 3.4视频控制 Media.controls;//是否有默认控制条...,但中途可能因为加载而暂停 eventTester("canplaythrough"); //可以播放,歌曲全部加载完毕 eventTester("seeking"); //寻找中 eventTester

19.3K72

JS控制Video播放器(快进、后退、播放暂停、音量大小)

:videoElement.currentTime 播放视频:videoElement.play() 暂停视频:videoElement.pause() 三.实际应用,直接上代码 1 //reurn...http://www.sundxs.com/test.mp4" controls width="400px" heigt="400px"> //audio和video都可以通过JS...获取对象,JS通过id获取video和audio的对象 2.获取video对象 Media = document.getElementById("media"); 3.Media方法和属性 HTMLVideoElement...; //是否自动播放 Media.loop; //是否循环播放 Media.play(); //播放 Media.pause(); //暂停 3.4视频控制 Media.controls;//是否有默认控制条...,但中途可能因为加载而暂停 eventTester("canplaythrough"); //可以播放,歌曲全部加载完毕 eventTester("seeking"); //寻找中 eventTester

19.4K60

如何在EasyGBS平台中添加宇视sdk实现暂停播放和恢复播放

EasyGBS国标视频云服务平台不仅支持无缝、完整接入内网或者公网的国标设备,在输出上,实现全平台、全终端输出。...平台可将GB/T28181的设备/平台推送的PS流转成ES流,并提供RTSP、RTMP、FLV、HLS、WebRTC等多种格式视频流的分发服务,实现Web浏览器、手机浏览器、微信端、PC客户端等各终端无插件播放...现有用户提出需求:想在其定制的EasyGBS平台中,添加宇视sdk暂停播放和恢复播放。为给用户提供更优体验,技术人员立即对该需求进行了开发实现。...以下为具体操作步骤:1、首先查找宇视sdk文档,在文档搜索“暂停播放”,选择最后一个查看;2、在文档中可以看到“暂停播放”函数下一个都会有“恢复播放”;3、随后,将这两个单独封装一下,提供给go层调用;...注意:封装方法需要知道每个参数的意义,“暂停和恢复播放”参数都是一样的;用户登录的标识(也就是句柄)和播放的通道编码,所以需要定义以下封装接口:4、最后在此函数里,将宇视的暂停和恢复播放封装即可:EasyGBS

30120

Android仿音乐播放器带进度的播放暂停按钮

因为项目需要,要做一个下载暂停开始的按钮,要求按钮上显示进度。网上找了找没有合适的,不太满意,于是自己动手写了一个。 效果如下: ? 主要步骤: 1、最外侧的圆环。 2、圆环内侧代表进度的圆弧。...3、暂停时在中心部位画出三角形。 4、播放时在中心部位画出矩形。 5、重写onTouch方法,DOWN事件时设置播放或者暂停的状态。 6、添加一个状态监听器,在调用者中监听状态。...new RectF(); /** 包围进度圆弧的矩形 */ private RectF rectF2 = new RectF(); /** 进度 */ private int progress; /** 暂停中还是播放中...,暂停播放 */ @Override public boolean onTouchEvent(MotionEvent event) { if (event.getAction() == MotionEvent.ACTION_DOWN...*/ public void setPlaying(boolean isPlaying) { this.isPlaying = isPlaying; invalidate(); } /** 播放暂停状态监听的接口

1K10

css点击控制动画暂停播放

水杯注水动画示例 当前好多使用到css动画的场景,并且需要鼠标控制动画的播放暂停,如上图所示,点击水龙头时出水,松开鼠标停止出水,保持停止时的状态。...接下来要介绍的便是一种脱离JS,使用纯CSS属性来写动画并控制播放暂停实现 1. 本案例效果 ? 本案例效果 2....需求描述 动画默认暂停状态; 鼠标按下,动画开始;鼠标松开,动画暂停; 鼠标再次按下,从上一帧暂停处继续完成动画,松开再次暂停; 动画完成后状态停留在完成帧,且无论点击与否都不再播放动画。 3....实现步骤 3.1 基础布局 .bollbox{ border-bottom:...animation: run 1s linear; animation-fill-mode: forwards; + animation-play-state: paused; // 起始状态,暂停

1.8K30

关于js暂停执行的方法

JavaScript是一门单线程但是可处理异步任务的脚本语言,是没有提供sleep等类似的方法的,当有需求需要暂停js脚本时,可以使用以下的方法  单线程分析:http://blog.csdn.net/...talking12391239/article/details/21168489 一:alert,comfirm弹窗暂停 js的alert,confirm弹窗类方法,是可以暂停js脚本执行的 例如: <...只要控制下while的判断条件,就可以实现暂停了 三,ajax同步请求方法 此方法需要服务器协作才能实现,本人不建议,因为懒,也懒得测试了, 大概步骤就是:ajax同步请求服务器,带上一个参数time,...服务器接收之后,sleep(time),到时间再输出,回到ajax回调函数,在这个时间 内,ajax是停止状态的 最后再补充几句,其实js是不能暂停脚本的,上面的方法,只是抢占当前浏览器线程,相当于该线程的某个语句一直还停留在当前浏览器线程..., 如:while,当前还未执行完while循环该方法,所以不能退出该线程 不让切换执行,所以实现暂停 本文为仙士可原创文章,转载无需和我联系,但请注明来自仙士可博客www.php20.cn 上一篇

6.9K00

谈谈一些有趣的CSS题目(十四)-- 纯 CSS 方式实现 CSS 动画的暂停播放

谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法 谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型 谈谈一些有趣的CSS题目(三)-- 层叠顺序堆栈上下文知多少 谈谈一些有趣的CSS...使用纯 CSS 的方法,能否暂停播放 CSS 动画?看起来不可能,至少很麻烦。...hover 伪类实现 使用 hover 伪类,在鼠标悬停在按钮上面时,控制动画样式的暂停。...CSS 动画的暂停播放 (Hover): 当然,这个方法不够智能,如果释放鼠标的自由,点击一下暂停、再点击一下播放就好了。...DEMO -- 纯 CSS 方式实现 CSS 动画的暂停播放: 上面的示例 Demo 中,实现了纯 CSS 方式实现 CSS 动画的暂停播放

93430

一步步实现自定义View之播放暂停控件

最近开始深入学习自定义View,通过模仿学习,再配合Kotlin,写了一些自定义控件,这次介绍的是类似于音乐播放暂停的一个控件 首先看一下效果图: ? 下面先分析一下原理: ?...状态1是播放状态,有两个小矩形,外面是一个圆,它需要最终变换成状态3的暂停状态 状态2是两个小矩形变成如图的黑色三角的一个过程 我们可以通过动画来实现它,两个小矩形分别变成三角形的一半 同时再给画布一个...同理可得 D到F,B到E,C到E的变化坐标 右侧的矩形也是如此计算,如果是逆时针旋转,三角形是倒过来的,原理也是一样的 6.动画 上面提到过我们需要一个从0到1的mProgress的变化(从播放暂停...),或者需要一个从1到0的mProgress(从暂停播放) 动画核心代码如下: val valueAnimator = ValueAnimator.ofFloat(if (isPlaying) 1f...barPadding="20dp"//矩形条距离原点(边界)的距离 app:barClockWise="true"//是否是顺时针转动 app:barPlayingState="false"//默认的状态,播放或者暂停

35610

线程的停止暂停

cn.qlq.thread.three.Demo10]-[DEBUG] syncObj – > SyncObj [username=b, password=aaa] 6.使用return停止线程   将interruptreturn...结合也可以很好的实现停止线程的效果。...2.暂停线程   暂停线程意味着可以恢复运行。在Java多线程编程中,可以使用suspend()方法暂停线程,使用resume()恢复线程。这两个方法都是过期作废的方法。...总结起来:线程恢复之后会继续执行暂停时的代码,而且暂停过程中睡眠时间也在走(暂停不会导致睡眠时间的延迟)。...总结:     suspend()方法可以暂停线程,而且不会释放同步锁,而且暂停不会导致睡眠时间的延长;     resume()可以使线程恢复状态,而且会继续执行暂停前的剩余代码。

5.5K20

Android实现语音播放录音功能

本文实例为大家分享了Android实现语音播放录音的具体代码,供大家参考,具体内容如下 项目用到的技术点和亮点 语音录音 (单个和列表) 语音播放(单个和列表) 语音录音封装 语音播放器封装 语音列表顺序播放...setOnAudioStateListenter(AudioStateListenter audioStateListenter) { mListenter = audioStateListenter; } /** * 使用单例实现...fileName = GenerateFileName(); // 文件名字 File file = new File(dir, fileName); // 路径+文件名字 //MediaRecorder可以实现录音和录像...TODO Auto-generated catch block e.printStackTrace(); LogUtil.e("语音error==",e.getMessage()); } } /** * 暂停...animationDrawable.stop(); } }else{ iv_voice.setBackgroundResource(R.drawable.voice_listen); } } 5.下载地址 Android实现语音播放录音

2.7K50
领券