趁着周末用微信小程序做了个简易录音机.跟大家分享,欢迎批评!老规矩,先几张图.1.为了进来看得清楚.刚开始没有加载音频列表.代码往前挪一挪即可.2.按住 录音按钮的时候会出现麦克风.中间的麦克风是个帧动画.其实就是用js控制图片显示隐藏.没啥好说的.这里值得说一说的是录音.微信的录音API后,如果录音时间太短,会录音失败.所以fail的时候还是需要处理一下.录音时间的限制和微信语音是一样的.60秒.3.我在录音完成后才加载列表.下图就...
本文介绍了微信小程序的开发，主要包括图片、录音、音频播放、音乐播放、视频、文件，具体如下：图片： wx.chooseImage(OBJECT)从本地相册选择图片或使用相机拍照。 OBJECT参数说明： 注：文件的临时路径，在小程序本次启动期间可以正常使用，如需持久保存，需在主动调用 wx.saveFile，在小程序下次启动时才能访问得到。 示例代码： wx.chooseImage({count: 1, // 默认9sizeType: [original, compressed], // 可以指定是原图还是压...
微信小程序 vidao视频播放及弹幕的功能的实现。 vidao 我现在看到的官方文档是不带danmu（弹幕）属性的，之前是有的，不过现在这个属性还可以生效。控制视频的状态可以根据video标签的唯一id得到一个对象实例。video组件并不具备action属性，不能通过action来控制。 .wxml<view class="section tc"><video src="{{src}}" controls ></video><view class="btn-area"><button bindtap="bindButtonTap">获取视频</button></view> </v...
微信小程序 audio音频播放 audio audio为音频组件，我们可以轻松的在小程序中播放音频。属性名类型默认值说明idString video 组件的唯一标识符，srcString 要播放音频的资源地址loopBooleanfalse是否循环播放controlsBooleantrue是否显示默认控件posterString 默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效nameString未知音频默认控件上的音频名字，如果 controls 属性值为 false 则设置 ...
之前曾经介绍过，在HTML5中可以通过<video>标签在网页中播放影片，且不需要再安装额外的插件，此功能已经带给用户极大的便利。但基本的<video>标签只提供了简单功能的播放器界面，如果想要改变播放器的外观和功能，只能结合<canvas>标签和javascript语句，就能制作出酷炫的播放控制器。{drawImage}画布canvas如何与视频video标签结合，达到制作各种视频功能的效果呢？其秘诀在于通过画布重新描绘一次视频的内容，将视频的每个画面都...
用HTML做了个音乐播放器，可以循环播放，选择歌曲，以及自动播放下一首，运用了js和json知识，下面是效果图和源码，有兴趣的可以试试哦效果图：源码：html<span style="color:#999999;"><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>音乐播放器</title> <script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script> <script src="js/music.js" type="text/javascript" charset="utf-8"></script>...
先给大家看下效果图，感兴趣的朋友可以参考实现代码核心代码如下所示： $.ajax({ url: "/music/music.txt", type: "get", success: function(data) { data = jQuery.parseJSON(data); var length = data.length; var now=0; for (i = 0; i < length; i++) { $("#musicText li").eq(i).after("<li>" + data[i].text + "</li>") } var player = { playButton: $(".play"), songText: $(".musicText"), state: 0, //0播放，1暂停 audi...
本文实例为大家分享了js图片轮播具体实现代码，供大家参考，具体内容如下 一、html代码部分（et.thtml）：<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><link type="text/css" rel="stylesheet" href="css/styleet.css"><script type="text/javascript" src="js/system.js"></script> </head> <body><div id="main"><div id="top"><span id="imgL" class="span1"></span><img src="images/1.jpg"...
本文实例讲述了JS实现的多张图片轮流播放幻灯片效果。分享给大家供大家参考，具体如下： <body style="width: 715px; height: 95px;"> <script language="javascript" type="text/javascript"> <!-- /************************************************** 名称: 图片轮播类 创建时间: 2010-07-11 zhangty 示例:页面中已经存在名为imgPlayer(或者别的ID也行)的节点.PImgPlayer.addItem( "test", "http://www.pomoho.com", "http://...
本文实例讲述了js实现的万能flv网页播放器代码。分享给大家供大家参考，具体如下： <div id="player5"><script type="text/javascript" src="swfobject.js"></script><script type="text/javascript">var s5 = new SWFObject("FlvPlayer201002.swf","playlist","300","210","7");s5.addParam("allowfullscreen","true");s5.addVariable("autostart","false");s5.addVariable("image","flash5.jpg");s5.addVariable("file","nobody....
本文为大家分享了jQuery实现的音乐播放试听列表，可以实现播放，暂停，自动获取音频路径功能，具体内容如下1.html文件 <!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>音乐播放试听列表</title></head><body> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <div class="modal-content" id="music_list_box"><div class="row music_lis...
一、准备数据库首先，我们设计MYSQL数据库如下：CREATE TABLE `songs` (`song_id` int(11) NOT NULL AUTO_INCREMENT,`url` varchar(500) NOT NULL,`artist` varchar(250) NOT NULL,`title` varchar(250) NOT NULL,PRIMARY KEY (`song_id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ; 这里，url字段表示是mp3音乐的存放地址,artist是歌曲的演唱者，title是歌曲的名称。我们再加入一些样例数据，如下：INSERT ...
jPlayer简介： 想在网页上播放背景音乐，不想用html标签的方式，因为那样只有音乐全部下载完以后才能播放，还容易出现跨浏览器兼容性的问题，于是选了一款基于jQuery的播放器jPlayer来做。 设置jPlayer的尺寸大小 使用构造函数配置jPlayer({size:Object})设置jPlayer的高宽。 使用构造函数配置jPlayer({sizeFull:Object})设置全屏尺寸。 注意可通过构造函数配置jPlayer({backgroundColor:"#RRGGBB"})设置jPlayer背景颜色。 Flash 安...
代码较最基础的播放器实现增加了playlist，使用MakeList实现多首播放，有需要的可以直接使用：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head><title>Untitled Page</title> </head> <body style="font-family:Verdana; font-size:12px"><script> /********************************************...
这是一款基于HTML5的焦点图动画，它和其他焦点图不同的地方在于，它播放的不仅仅是图片，而是可以自定义控制的网页元素。它不仅在图片间切换有过渡动画效果，而且在切换时图片中的元素也将出现动画效果，比如图中的文字移动、打散、重新组合等，这款HTML5动画图片播放器算得上是高端大气上档次。 效果图：HTML代码 <div class="parallax-bg" id="slider-wrap"><div class="slider parallax-bg" id="slider"><div class="slider-sec...