首页 > 编程语言 >小程序进入页面自动播放音频

小程序进入页面自动播放音频

时间:2023-06-27 20:44:19浏览次数:38  
标签:audio innerAudioContext 音频 InnerAudioContext 自动播放 播放 页面

以前我开发PC和H5时知道 音频/视频如果自动播放是需要静音的  小程序是不一样的

1.  首先肯定是要在 onl oad / onShow 中调用我们准备播放用的函数  这里根据自己需求写

2. 重点  我们需要构建一个 InnerAudioContext 对象

     //创建内部 audio 上下文 InnerAudioContext 对象。
    this.innerAudioContext = wx.createInnerAudioContext();
    this.innerAudioContext.src = that.data.srcMic //设置音频地址
    this.innerAudioContext.loop = true // 是否循环播放
    this.innerAudioContext.play(); //播放音频

这里 重要的几步 

  1/  构建 audio对象  wx.createInnerAudioContext

  2/  配置音频地址 src

  3/ 播放音频  play()

其他的更具体的配置项可以参考微信文档   https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/InnerAudioContext.html

到这里音频已经可以正常播放了

ps:  音频地址问题

如果你是用的是在线地址 http: / https 这种 那只要资源没有问题 一定是可以播放的

但是如果你是本地文件 不能使用 ../../ 这种相对路径 应使用绝对路径 参考如下图

 

参考代码:

 

标签:audio,innerAudioContext,音频,InnerAudioContext,自动播放,播放,页面
From: https://www.cnblogs.com/shirunfeng/p/17509874.html

相关文章

  • elementui admin中使用外部链接 iframe进行页面的展示
    有时候我们需要外部链接进行展示而且想要这个外部链接的页面不是打开新窗口而是嵌入在项目布局中,就需要用到iframe控件了,iframe控件不需要安装依赖包,可以直接使用1.在template中写<template>  <div>    <iframe:src="linkUrl"frameborder="0":style="{'heig......
  • 如何获取页面上某个元素的坐标
    打开浏览器的F12控制台,在console内输入下面代码functiongetPosition(node){//获取元素相对于其父元素的left值varleftvarleft=node.offsetLeft;vartop=node.offsetTop;//取得元素的offsetParentcurrent=node.offsetParent;//一直循环直到根元素while(current!=nu......
  • Vue如何在页面加载时将url的参数赋值给组件
    <template> <inputv-model="loginForm.username" name="username" type="text" tabindex="1" auto-complete="on" /><inputv-model="loginForm.password":type="passwordType"......
  • 前端Vue自定义加载中loading加载结束end组件 可用于分页展示 页面加载请求
    前端Vue自定义加载中loading加载结束end组件可用于分页展示页面加载请求,请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13219效果图如下:实现代码如下:cc-paging使用方法<!--加载中用法isLoading:是否加载isEnd:是否结束加载--><cc-paging:isLoad......
  • HTML Over the wire 框架和单页面应用的区别
    HTMLOverthewire方法包括类似于多页面应用程序(MPA)的服务器端渲染(SSR)。然而,在初始请求之后,浏览器仅通过AJAX异步检索HTML片段,因此整个页面不再重新渲染。与单页应用程序(SPA)不同,服务器还处理应用程序的逻辑和状态:[图片]单页面应用(SinglePageApplication,简......
  • 08异步短信发送,注册功能,补充【1.为什么要写media才能访问,2.debug作用,3.ALLOWED_HOSTS
    1异步发送短信#原来的发送短信,是同步 -前端输入手机号---》点击发送短信---》前端发送ajax请求----》到咱们后端接口---》取出手机号----》调用腾讯发送短信---》腾讯去发短信---》发完后----》回复给我们后端发送成功---》我们后端收到发送成功---》给我们前端返回发送成功......
  • Hugging News #0626: 音频课程更新、在线体验 baichuan-7B 模型、ChatGLM2-6B 重磅发
    每一周,我们的同事都会向社区的成员们发布一些关于HuggingFace相关的更新,包括我们的产品和平台更新、社区活动、学习资源和内容更新、开源库和模型更新等,我们将其称之为「HuggingNews」,本期HuggingNews有哪些有趣的消息,快来看看吧!重要更新最新音频课程现已发布近期,我们......
  • JQ 自动加载页面
    demo.html<listyle="opacity:0;-moz-opacity:0;filter:alpha(opacity=0);"><p>---------------</p></li><listyle="opacity:0;-moz-opacity:0;filter:alpha(opacity=0);"><p>阅谁问君诵,水落清香浮</p></li>......
  • JS 跳转对应的手机页面
    location.pathname(location对象的pathname属性)用于设置或取得当前URL的路径部分<scripttype="text/javascript"> varpath=location.pathname; alert(path);</script>效果图: 前提是手机和PC站都同一个数据库,更新的路径都是相同的,只是域名的不同。一个是www,另一个是m......
  • thinkphp或者其他h5页面开启HMR
    在ThinkPHP框架中,HTML文件通常是由PHP渲染的视图文件。要在这样的环境中实现HMR(HotModuleReplacement,热模块替换),你可能需要将前端开发环境(如Webpack或Vite)与ThinkPHP集成。以下是一个基本的步骤:1.首先,你需要在项目中安装Node.js和npm(或yarn),并使用它们来安装W......