本文主要介绍了js实现音频控制进度条功能的示例代码。具有很好的参考价值。下面跟着小编一起来看下吧效果图：代码如下：<!doctype html> <html> <head> <meta name="author" content="dony"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="pragma" content="no-cache"> <meta name="renderer" content="webkit"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equi...
应用情景，有新的订单生成，后台进行消息提醒并播放音频（这里用到轮询简单实现）：下面附代码 1.找到laravel-admin 中的 index.blade.php 文件进行编辑 {{-- 音频通知 --}} <audio style="display:none; height: 0" id="bg-music" preload="auto" src="http://fjdx.sc.chinaz.com/Files/DownLoad/sound1/201511/6571.mp3" loop="loop"></audio> <script>function LA() {}LA.token = "{{ csrf_token() }}";var getting = {url:/adm...
这是我第一次开发小程序，开发的产品是音频类的，在大佬的建议下采用了 mpvue ,一周时间把功能都做出来，由于不太熟悉mpvue和微信小程序，足足用了一周时间来改bug才出来一个能用的版本，在这里整理分享下我开发时遇到的一些问题和给出一些建议。在 Linux 上开发小程序 在公司电脑装了双系统，日常用的是 Ubuntu 系统，Linux或Mac的开发环境对前端相对来说会友好一些。微信小程序官方的开发者工具只有 Windows 和 Mac 版本，所以这...
Wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件，本文主要记录它及其视觉效果插件Regions插件的使用方法。 1、创建实例引入插件import WaveSurfer from "wavesurfer.js";创建实例对象this.wavesurfer = WaveSurfer.create(options);options参数默认值说明audioRate1音频的播放速度，数值越小越慢barWidthnone如果设置，波纹的样式将变成类似柱状图的形状barHeight1波纹柱状图的高度，当大于1的时候，将增加设置的...
小程序原生组件的音频播放时并没有进度条的显示，而此次项目中，鉴于原生的视频进度条样式太丑，产品要求做一个可拖拽的进度条满足需求。 视频和音频提供的api大致是相似的，可以根据以下代码修改为与音频相关的进度条。 wxml的结构如下: <video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1...
首先在没有播放音频之前，居然拿不到总时长 但是在播放之后也需要设置setTimeout来获取 所以在监听音频播放进度更新事件中获取。顺便获取当前播放进度 按照官方的写法 audioPlayed: function () {myAudio.play()setTieout(() => {myAudio.onTimeUpdate(() => {console.log(myAudio.duration) //总时长console.log(myAudio.currentTime) //当前播放进度})}, 500) }但是这两个console都没有触发，很是神奇 增加延迟的时间也没有用 ...
真的脑子疼，小程序的音频组件居然没有进度控制的功能，网上的方法又很少，逻辑通了就好写了。 1.所有音频播放、停止按钮使用状态切换控制 2.当点击某个音频播放时，首先将所有音频的状态置为停止状态，然后将当前音频置为播放状态 3.滚动条插件配合音频控件一起使用 4.播放状态时滚动条的长度随音频进度变化而变化，时间也要显示 5.拖动滚动条时，音频的当前时间随滚动条变化而变化1.wxml <text class="left_text">{{item.cur...
今天要写的，不是大家平时会用到的东西。因为兼容性实在不行，只是为了说明下前端原来还能干这些事。 大家能想象前端是能将摄像头和麦克风的视频流和音频流提取出来，再为所欲为的么。或者说我想把我canvas画板的内容录制成一个视频，这些看似js应该做不到的事情，其实都是可以做到的，不过兼容性不好。我在这里都是以chrome浏览器举的例子。 这里先把用到的api列一下： getUserMedia：打开摄像头和麦克风的接口（文档链接）MediaR...
小程序提供了录音和播放音频的能力，从基础库 1.6.0 开始支持了wx.getRecorderManager()，录音都采用wx.getRecorderManager()提供的api，播放音频文件采用wx.createInnerAudioContext()提供的api 导入录音和播放音频功能 const recorderManager = wx.getRecorderManager(); // 录音功能 const innerAudioContext = wx.createInnerAudioContext(); // 播放音频注册录音结束事件 // 录音结束 recorderManager.onStop((res) => {co...
我们项目现在有这样一个需求，通过select元素来选择音频文件的名称，点击按钮可以进行试听。 话不多说，直接上代码： HTML： <div class="testVoice"><p class="p-title">提示声音:</p><el-select v-model="valueOpt2" placeholder="请选择"><el-optionv-for="item in options":key="item.valueOpt":label="item.label":value="item.valueOpt"></el-option></el-select><el-button type="primary" @click="muiscPlay1">试听</el-bu...
有的时候我们需要在vue中添加音频文件，但是直接将音频文件放置了assets目录下的时候，会发现并不能正常播放，下面是两种常用的配置方法： 方法一、将音频文件放置在static目录中，然后进行调用，如下所示 <audio class="success" src="/static/audios/do_wrong.mp3"> </audio>以上这种方式就能够解决这个问题了。 方法二、给项目配置mp3格式的解析器 1、在webpack.base.conf.js中添加加载器，如下 {test: /\.(mp3)(\?.*)?$/,loade...
现效果如下：由于我这边不需要其他按钮，就没写 数据是由后台提供，在这做了个小列子 后台代码 public ActionResult MusicPlayer(int musicId=0) {MusicPlayerModel model = new MusicPlayerModel();switch (musicId){default:model.MusicName = "Believe-动画《海贼王》";model.CoverImg = "/Content/Music/Believe-cover.jpg";model.FileUrl = "/Content/Music/Believe.mp3";model.MusicStartSecond = 0;model.MusicEndSecond = ...
#load-media.js /*** Create by Capricorncd 2017*/ // 同域资源实现视频截图，可上传的图片数据格式 // 非同域资源实现canvas截图预览 // 提示码 const CODES = {0: success,1: The url is not valid,2: onerror } /*** constructor* @param opts.url 音频|视频URL* @param opts.type audio|video* @param opts.callback 回调函数*/ function loadMedia(opts) {this.callback = opts.callback || function (res) {console.log(res...
一、界面的生命周期/*** 监听页面加载，* 页面加载中*/ onLoad:function(){var _this = thisconsole.log(index---------onload())/*** 监听音乐播放*/wx.onBackgroundAudioPlay(function() {console.log(onBackgroundAudioPlay)}),/*** 监听音乐暂停*/wx.onBackgroundAudioPause(function() {console.log(onBackgroundAudioPause)}),/*** 监听音乐停止*/wx.onBackgroundAudioStop(function() {console.log(onBackgroundAudioStop)...
效果图：代码如下： <!doctype html> <html> <head> <meta name="author" content="dony"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="pragma" content="no-cache"> <meta name="renderer" content="webkit"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-w...