微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
作者：奋进程序猿
字体：[ ] 类型：转载 时间：
本篇文章主要介绍了微信小程序-图片、录音、音频播放、音乐播放、视屏、文件代码实例，有兴趣的可以了解一下。
本文介绍了微信小程序的开发，主要包括图片、录音、音频播放、音乐播放、视频、文件，具体如下：
wx.chooseImage(OBJECT)
从本地相册选择图片或使用相机拍照。
OBJECT参数说明：
注：文件的临时路径，在小程序本次启动期间可以正常使用，如需持久保存，需在主动调用 wx.saveFile，在小程序下次启动时才能访问得到。
示例代码：
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths
wx.previewImage(OBJECT)
预览图片。
OBJECT参数说明：
示例代码：
wx.previewImage({
current: '', // 当前显示图片的http链接
urls: [] // 需要预览的图片http链接列表
wx.getImageInfo(OBJECT)
获取图片信息
OBJECT参数说明：
success返回参数说明：
示例代码：
wx.getImageInfo({
src: 'images/a.jpg',
success: function (res) {
console.log(res.width)
console.log(res.height)
wx.chooseImage({
success: function (res) {
wx.getImageInfo({
src: res.tempFilePaths[0],
success: function (res) {
console.log(res.width)
console.log(res.height)
wx.startRecord(OBJECT)
开始录音。当主动调用wx.stopRecord，或者录音超过1分钟时自动结束录音，返回录音文件的临时文件路径。
OBJECT参数说明：
注：文件的临时路径，在小程序本次启动期间可以正常使用，如需持久保存，需在主动调用wx.saveFile，在小程序下次启动时才能访问得到。
wx.stopRecord()
主动调用停止录音。
示例代码：
wx.startRecord({
success: function(res) {
var tempFilePath = res.tempFilePath
fail: function(res) {
//录音失败
setTimeout(function() {
//结束录音
wx.stopRecord()
音频播放控制:
wx.playVoice(OBJECT)
开始播放语音，同时只允许一个语音文件正在播放，如果前一个语音文件还没播放完，将中断前一个语音播放。
OBJECT参数说明：
示例代码：
wx.startRecord({
success: function(res) {
var tempFilePath = res.tempFilePath
wx.playVoice({
filePath: tempFilePath,
complete: function(){
wx.pauseVoice()
暂停正在播放的语音。再次调用wx.playVoice播放同一个文件时，会从暂停处开始播放。如果想从头开始播放，需要先调用 wx.stopVoice。
示例代码：
wx.startRecord({
success: function(res) {
var tempFilePath = res.tempFilePath
wx.playVoice({
filePath: tempFilePath
setTimeout(function() {
//暂停播放
wx.pauseVoice()
wx.stopVoice()
结束播放语音。
示例代码：
wx.startRecord({
success: function(res) {
var tempFilePath = res.tempFilePath
wx.playVoice({
filePath:tempFilePath
setTimeout(function(){
wx.stopVoice()
音乐播放控制:
wx.getBackgroundAudioPlayerState(OBJECT)
获取音乐播放状态。
OBJECT参数说明：
&success返回参数说明：
&示例代码：
wx.getBackgroundAudioPlayerState({
success: function(res) {
var status = res.status
var dataUrl = res.dataUrl
var currentPosition = res.currentPosition
var duration = res.duration
var downloadPercent = res.downloadPercent
wx.playBackgroundAudio(OBJECT)
播放音乐，同时只能有一首音乐正在播放。
OBJECT参数说明
wx.playBackgroundAudio({
dataUrl: '',
title: '',
coverImgUrl: ''
wx.pauseBackgroundAudio()
暂停播放音乐。
wx.pauseBackgroundAudio()
wx.seekBackgroundAudio(OBJECT)
控制音乐播放进度。
OBJECT参数说明
wx.seekBackgroundAudio({
position: 30
wx.stopBackgroundAudio()
停止播放音乐。
wx.stopBackgroundAudio()
wx.onBackgroundAudioPlay(CALLBACK)
监听音乐播放。
wx.onBackgroundAudioPause(CALLBACK)
监听音乐暂停。
wx.onBackgroundAudioStop(CALLBACK)
监听音乐停止。
wx.saveFile(OBJECT)
保存文件到本地。
OBJECT参数说明：
示例代码：
wx.startRecord({
success: function(res) {
var tempFilePath = res.tempFilePath
wx.saveFile({
tempFilePath: tempFilePath,
success: function(res) {
var savedFilePath = res.savedFilePath
wx.getSavedFileList(OBJECT)
获取本地已保存的文件列表
OBJECT参数说明：
&success返回参数说明：
&fileList中的项目说明：
&示例代码：
wx.getSavedFileList({
success: function(res) {
console.log(res.fileList)
wx.getSavedFileInfo(OBJECT)
获取本地文件的文件信息
OBJECT参数说明：
&success返回参数说明：
&示例代码：
wx.getSavedFileInfo({
filePath: 'wxfile://somefile', //仅做示例用，非真正的文件路径
success: function(res) {
console.log(res.size)
console.log(res.createTime)
wx.removeSavedFile(OBJECT)
删除本地存储的文件
OBJECT参数说明：
&示例代码：
wx.getSavedFileList({
success: function(res) {
if (res.fileList.length & 0){
wx.removeSavedFile({
filePath: res.fileList[0].filePath,
complete: function(res) {
console.log(res)
wx.openDocument(OBJECT)
新开页面打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx
OBJECT参数说明：&
wx.downloadFile({
url: '/somefile.pdf',
success: function (res) {
var filePath = res.tempFilePath
wx.openDocument({
filePath: filePath,
success: function (res) {
console.log('打开文档成功')
wx.chooseVideo(OBJECT)
拍摄视频或从手机相册中选视频，返回视频的临时文件路径。
OBJECT参数说明：
返回参数说明：
注：文件的临时路径，在小程序本次启动期间可以正常使用，如需持久保存，需在主动调用 wx.saveFile，在小程序下次启动时才能访问得到。
示例代码：
&view class="container"&
&video src="{{src}}"&&/video&
&button bindtap="bindButtonTap"&获取视频&/button&
bindButtonTap: function() {
var that = this
wx.chooseVideo({
sourceType: ['album','camera'],
maxDuration: 60,
camera: ['front','back'],
success: function(res) {
that.setData({
src: res.tempFilePath
音频组件控制：
wx.createAudioContext(audioId)
创建并返回 audio 上下文 audioContext 对象
audioContext
audioContext 通过 audioId 跟一个 audio 组件绑定，通过它可以操作一个 audio 组件。
audioContext对象的方法列表：
&示例代码：
&!-- audio.wxml --&
&audio src="{{src}}" id="myAudio" &&/audio&
&button type="primary" bindtap="audioPlay"&播放&/button&
&button type="primary" bindtap="audioPause"&暂停&/button&
&button type="primary" bindtap="audio14"&设置当前播放时间为14秒&/button&
&button type="primary" bindtap="audioStart"&回到开头&/button&
// audio.js
onReady: function (e) {
// 使用 wx.createAudioContext 获取 audio 上下文 context
this.audioCtx = wx.createAudioContext('myAudio')
src: 'http://ws.stream./M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd&uin=&vkey=E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
audioPlay: function () {
this.audioCtx.play()
audioPause: function () {
this.audioCtx.pause()
audio14: function () {
this.audioCtx.seek(14)
audioStart: function () {
this.audioCtx.seek(0)
视频组件控制：
wx.createVideoContext(videoId)
创建并返回 video 上下文 videoContext 对象
videoContext
videoContext 通过 videoId 跟一个 video 组件绑定，通过它可以操作一个 video 组件。
videoContext对象的方法列表：
&示例代码：
&view class="section tc"&
&video id="myVideo" src="http://wxsnsdy./105/20210/snsdyvideodownload?filekey=2ca905ce620bdcff44e40400&bizid=1023&hy=SH&fileparam=302cffdc4ff0e8d7f"
enable-danmu danmu-btn controls&&/video&
&view class="btn-area"&
&input bindblur="bindInputBlur"/&
&button bindtap="bindSendDanmu"&发送弹幕&/button&
function getRandomColor () {
let rgb = []
for (let i = 0 ; i & 3; ++i){
let color = Math.floor(Math.random() * 256).toString(16)
color = color.length == 1 ? '0' + color : color
rgb.push(color)
return '#' + rgb.join('')
onReady: function (res) {
this.videoContext = wx.createVideoContext('myVideo')
inputValue: '',
bindInputBlur: function(e) {
this.inputValue = e.detail.value
bindSendDanmu: function () {
this.videoContext.sendDanmu({
text: this.inputValue,
color: getRandomColor()
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具更多频道内容在这里查看
爱奇艺用户将能永久保存播放记录
过滤短视频
暂无长视频（电视剧、纪录片、动漫、综艺、电影）播放记录，
按住视频可进行拖动
&正在加载...
收藏成功，可进入查看所有收藏列表
把视频贴到Blog或BBS
当前浏览器仅支持手动复制代码
视频地址：
flash地址：
html代码：
通用代码：
通用代码可同时支持电脑和移动设备的分享播放
方式1：用手机看
用爱奇艺APP或微信扫一扫，在手机上继续观看
当前播放时间：
方式2：一键下载至手机
限爱奇艺安卓6.0以上版本
使用微信扫一扫，扫描左侧二维码，下载爱奇艺移动APP
其他安装方式：手机浏览器输入短链接//71.am/udn
下载安装包到本机：&&
设备搜寻中...
请确保您要连接的设备（仅限安卓）登录了同一爱奇艺账号 且安装并开启不低于V6.0以上版本的爱奇艺客户端
连接失败！
请确保您要连接的设备（仅限安卓）登录了同一爱奇艺账号 且安装并开启不低于V6.0以上版本的爱奇艺客户端
部安卓（Android）设备，请点击进行选择
请您在手机端下载爱奇艺移动APP（仅支持安卓客户端）
使用微信扫一扫，下载爱奇艺移动APP
其他安装方式：手机浏览器输入短链接http://71.am/udn
下载安装包到本机：&&
爱奇艺云推送
请您在手机端登录爱奇艺移动APP（仅支持安卓客户端）
使用微信扫一扫，下载爱奇艺移动APP
180秒后更新
打开爱奇艺移动APP，点击“我的-扫一扫”，扫描左侧二维码进行登录
没有安装爱奇艺视频最新客户端？
正在检测客户端...
您尚未安装客户端，正在为您下载...安装完成后点击按钮即可下载
， 可在设置中重新打开噢！
30秒后自动关闭
好用到停不下来：聚合多平台的音乐小程序
请选择打赏金额：
播放量数据：快去看看谁在和你一起看视频吧~
更多数据：
Copyright (C) 2017
All Rights Reserved
您使用浏览器不支持直接复制的功能，建议您使用Ctrl+C或右键全选进行地址复制
安装爱奇艺视频客户端，
马上开始为您下载本片
5秒后自动消失
&li data-elem="tabtitle" data-seq="{{seq}}"&
&a href="javascript:void(0);"&
&span>{{start}}-{{end}}&/span&
&li data-downloadSelect-elem="item" data-downloadSelect-selected="false" data-downloadSelect-tvid="{{tvid}}"&
&a href="javascript:void(0);"&{{pd}}&/a&
选择您要下载的《》剧集：
本奖品由提供
红包雨下完了，下次早点来噢~
您使用浏览器不支持直接复制的功能，建议您使用Ctrl+C或右键全选进行地址复制一款与众不同的音乐小程序
文章标签：
哪一款音乐软件没有歌手分类，也没有排行榜，更没有琳琅满目的各式推荐？就是小程序——【落网音乐】，一款与众不同的。
这里没有太多的选择，也没有任何的商业信息，更不能随意搜索，你能做的就是选择是否播放。
不是随手的推荐，也不会迎合大众、强追热点，【落网音乐】只推荐这个时代里最有质感、朴素的音乐。
与大家一起分享落网的故事。
&曾冬宝：落网技术经理
八年互联网研发经验
老胡（全名“胡建国”，落网ID是“落在低处”） 落网创始人
落网成立于2003年3月至今已经有14个年头，想问一下当时成立落网的初衷，为什么取名叫做“落网”？
老胡：「落」这个字，“落”是坠落、落地的意思，我一直认为文化的本质是沉淀，落下来才能静心把事情做好。独立而不独于世，踏实地生活，不失自己的姿态。落网：落在生命的低处，网住即逝的光影。
看了落网的创始人有三个，落在低处，左岸以西，小爝，好像三个人都是来自不同的地方，可以问下三个人是什么样的原因在一起做这个“落网”这个事情呢？
老胡：当时左岸和小爝是以志愿者身份加入落网的，原因是对音乐的一个共同爱好吧。
查了资料，2003年的时候三个创始人的年龄都不满20岁，想问一下那时候创始人是在读书？工作还是？
老胡：那年我还在读高中，落网没有独立的域名，挂靠在另外一个网站上。直到上了大二，我决定购买独立域名，自学建站。当时一个独立网站年维护服务费用大概是8000多元，而我一个月的生活费只有两百块，我就这样通过打工赚钱和网友的帮助一直坚持着。
在08年以前因为各种原因落网停站了三次，尤其是08年的时候程序出错，落网所有数据丢失，一切从零开始，可以说对落网是一个不小的打击，想问一下当时大家的心情，怎样解决这个事情，有想过放弃吗？
老胡：那天和往常一样，点开浏览器进入落网的主页，网站程序突然出现故障，所有的数据都没有了，当时我只能硬着头皮想办法。最后花了七个小时，把部分数据恢复，又花了一个月的时间，每天通过谷歌和百度的网页快照，将丢失的帖子一个个找回来。尽管那些评论全部都没了。一直没有想过要放弃，总觉得没有什么过不去的。
2013-09 &过去六年内，落网共收到国内外的会员捐助 &96128.53人民币、2156.7美元,这个是百科的资料，想问一下这个捐助背后的故事？
老胡：这么多年来，有几次网站都濒临险境，毕竟维持一个网站并没那么容易。0809年的时候，我纠结过一阵子，最后鼓起勇气发起募捐，希望落网的用户能帮帮忙。在这段时间里，落网的用户给了我许多资金的捐助，汇过来的币种也是多种多样，有美元、加元、卢布等等，不仅有国内的用户，甚至还有海外用户，当时他们都没有留下姓名，我至今仍不知道这些钱是谁汇的。现在想想，真的很感谢他们，落网是我们共同的家庭，是有感情维系的。
落网一直坚持人工推荐独立音乐，想问一下推荐的标准是什么？
老胡：标准的话，至少是优质音乐，我们致力于推荐这个时代里最有质感、朴素的音乐。我一直认为：音乐是音乐人的情感衍生物，所以有感情地去推荐音乐会让用户更好的感受到音乐本身的情绪。而每一期的音乐的制作动机都是随机，这样做的目的是能够让自己的制作动机保持纯粹、保持真情实感。如果一期音乐，连我自己本身都不喜欢的话，我是绝对不会向别人推荐的。感动别人，必先感动自己。
你们是怎样发现这么多有质感的音乐的？
老胡：需要海量的试听量来来支撑自己进行选曲，所以要求我每天有规律的去试听大量的新老歌曲。为保证音乐风格的多元化，从去年开始，落网陆续邀请了倪兵、电板鸭、王三溥等人入驻落网订阅期刊版块，一起向大家推荐好的音乐。
现在落网团队有多少人?
老胡：加上线下空间运营，大概有三十多人左右。
觉得跟网易云音乐相比，落网音乐有哪些优势？
老胡：其实落网的模式和现有音乐产品的模式都不一样，所以我们都是用共赢共存的方式存在。我一直觉得我们和其他所有做曲库类的产品都不是竞争关系。
对于落网来说，定位于优质内容的推荐。我们会更加注重内容的广度和深度。产品的内容、设计、体验等都是一个产品获得用户青睐的原因，能够吸引人事综合起来的结果，所以我们要发挥自身的优势和侧重点去做出不一样的产品出来。
落网很纯粹，但是纯粹不代表单一，不论是编辑人工推荐或是用自己制作的音乐期刊，都相当丰富多元，无论是日本的丽日和风，俄罗斯的异国风情，泰国的热带小调，甚至到非洲、阿拉伯世界等都有值得让你惊喜的瞬间。在落网，你能听到过去许多未曾发觉的优质作品，这是我们最大的价值之一。
在小程序出来之前落网APP已经受到很多人的欢迎，为什么还要开发小程序呢？
老胡：我们做小程序有几个想法：简单、轻但优质的阅听体验（更多其实做好玩的事），所以考量内容后，以期刊为主，让大家认识落网，推广给更多的音乐爱好者。
小编是通过了解落网这个小程序才了解这个APP的，想问一下推出了小程序之后，有没有给APP进一步引流呢？
老胡：目前小程序还挺简单的，以音乐期刊为主。在落网音乐小程序就是单纯听音乐，如果想收藏、缓存歌曲等功能，或是想获取更多优质音乐推荐内容，我们要鼓励用户回到落网，未来持续带给大家更好的内容与服务，是我们不变的目标。
小程序已经诞生将近半年了，你们看好小程序吗？可不可以说说你对程序的看法？
老胡：我很看好小程序，落网落网在小程序的用户数量呈一定量级的上升。小程序适合轻量级的音乐内容分享。
一个能感动别人的作品，创作者必须心中有情怀，在这个任何东西都要被贴上商业标签的时代，情怀之路并不好走，索性落网虽有情怀，却也能做到“独立而不独于世，踏实地生活，不失自己的姿态”。也正因为如此，微信小程序才想向大家推荐【落网音乐】小程序，身处快餐音乐环境之久的我们，也该让自己听一听纯粹的音乐了！
此版块内容仅用于学习、研究或欣赏。我们不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关访问者可将本网站提供的内容或服务用于学习、研究或欣赏，以及其他非商业性或非盈利性用途，但同时应遵守著作权法及其他相关法律的规定，不得侵犯本网站及相关权利人的合法权利。您所在位置： &
&nbsp&&nbsp&nbsp&&nbsp
第18篇音乐播放1——小程序.ppt 26页
本文档一共被下载：
次 ,您可全文免费在线阅读后下载本文档。
下载提示
1.本站不保证该用户上传的文档完整性，不预览、不比对内容而直接下载产生的反悔问题本站不予受理。
2.该文档所得收入(下载+内容+预览三)归上传者、原创者。
3.登录后可充值，立即自动返金币，充值渠道很便利
需要金币：250 &&
你可能关注的文档：
··········
··········
音乐播放——小程序 能力目标： 理解小程序Applet的生命周期及常用方法。 学会在小程序里绘制图形、图像和文字。 理解如何通过HTML文件向小程序传递参数值。 能编写音乐播放小程序，还能结合多线程，在小程序中动态显示当前时间。 内容介绍 18.1
任务预览 18.2
小程序 18.3
生命周期与常用方法 18.4
播放声音 18.5
网页传值 18.6
绘制图像 18.7
状态栏动态显示时间 18.8
本章小结 18.9
实训18：音乐播放与时间显示 18.1
本章实训程序运行结果： 18.2
Java程序有： Application，独立执行的应用程序。 Applet，小应用程序，简称小程序，嵌入浏览器运行。通过把小程序嵌入到 HTML网页文件而实现。 java.applet包的Applet类是小程序的根， 编写小程序必须自定义一个继承Applet或JApplet的类。 JApplet位于javax.swing包，是Applet的子类。 Applet容器默认布局是FlowLayout，JApplet容器是BorderLayout。 JDK提供了模拟浏览器运行命令appletviewer（小程序查看器）。 【例18-1】编写绘制矩形和椭圆的小程序。
Java源程序如下（存放在Example1.java文件）： import javax.swing.JA import java.awt.*;
//下面是小程序主类 public class Example1 extends JApplet {
public void paint(Graphics g){
g.drawRect(10, 10, 200, 100);
g.drawOval(10, 10, 200, 100); } } 网页文件如下（存放在Example1.html文件）： &html& &applet code=&Example1.class& width=&220& height=&120&& &/applet& &/html&
生命周期与常用方法
生命周期：小程序从开始运行到结束的整个过程。 与生命周期紧密关联并能自动执行5个方法： （1）void init()：初始化方法。 （2）void start()：启动方法。 （3）void stop()：停止方法。 （4）void destroy()：销毁方法。 这4个方法是根类Applet定义，都能自动执行。编程者可以按需要在小程序主类中重写这些方法。 （5）void paint(Graphics g)：绘制图形或文字的方法，来自容器根类Container。 其中Graphics是图形上下文（图形环境）抽象类，对象要从其他图形上下文中获取，或者通过调用组件的getGraphics()方法来构建。Graphics对象g相当画笔，
【例18-2】编写测试小程序生命周期的程序。
public class Example2 extends JApplet {
StringBuffer strBuf = new StringBuffer();
public void init(){
printInfo(&初始化...&); }
public void start(){ printInfo(&启动...&); }
public void stop(){ printInfo(&停止...&); }
public void destroy(){
printInfo(&销毁...&); }
public void paint(Graphics g){
g.drawString(strBuf.toString(), 10, 20);
public void printInfo(String info){
System.out.print(info);
strBuf.append(info);
this.repaint();
//调用重绘方法，主动执行paint方法 } } 还有网页文件
…&applet code=&Example2.class& width=&220& height=&120&&
&/applet& … 18.4
Java可播放wav、mid（mi
正在加载中，请稍后...16:23 提问
微信小程序调用网页音频
尝试了qq音乐多种方式的音乐分享链接，有手机，PC端，还有网页的，但不能用，格式与官方的例子不一样，有谁知道怎么获取合适的链接吗
按赞数排序
获取qq空间背景音乐的方法不知道是否可用，先获取网页源码，再提取‘MP3’关键词
其他相关推荐}