uniapp播放音频

简介: uniapp播放音频

人们不太看重自己的力量——这就是他们软弱的原因。——高尔基

播放音频的代码很简单:

const innerAudioContext = uni.createInnerAudioContext();
    innerAudioContext.src = '/imgs/oss/picGo/kuangstudy9664a946-42a5-4111-80e7-65e735932ef7.wav';
    innerAudioContext.play();

官方文档:

https://uniapp.dcloud.io/api/media/audio-context

除了播放、暂停、停止等也都能实现

完整代码:

<template>
  <view class="content">
    <image :class="{ widther: play }" class="logo" src="/static/logo.png"></image>
    <view class="text-area">
      <text class="title">{{ title }}</text>
    </view>
    <navigator :class="{ widther: play }" url="/pages-user/list">user-list</navigator>
    <navigator :class="{ widther: play }" url="/pages-news/list">news-list</navigator>
    <view>{{ val }}</view>
    <view @tap="parentEvent"><view @tap.stop="childEvent">触发触发</view></view>
    <view @tap="parentEvent"><view @touchend="childEvent">触发触发</view></view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      title: 'Hello',
      play: false,
      val: 0
    };
  },
  onLoad() {
    const innerAudioContext = uni.createInnerAudioContext();
    innerAudioContext.src = '/imgs/oss/picGo/kuangstudy9664a946-42a5-4111-80e7-65e735932ef7.wav';
    innerAudioContext.play();
    setTimeout(() => (this.play = true), 1000);
    uni.$on('add', this.add);
  },
  methods: {
    add(e) {
      console.log('主页的add被触发了!: ', e);
      this.val += e.data;
    },
    parentEvent(e) {
      console.log('parentEvent');
    },
    childEvent(e) {
      console.log('childEvent');
      e.stopPropagation();
    }
  }
};
</script>
<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.logo {
  height: 0;
  width: 0;
  /* #ifndef APP-PLUS-NVUE */
  transition: all 1s;
  /* #endif */
  /* #ifdef APP-PLUS-NVUE */
  transition: width, height 1s;
  /* #endif */
}
.text-area {
  display: flex;
  justify-content: center;
}
.title {
  font-size: 36rpx;
  color: #8f8f94;
}
.widther {
  width: 200rpx;
  height: 200rpx;
}
</style>
相关文章
|
4月前
uniapp获取音频的时长
uniapp获取音频的时长
273 0
|
11月前
|
存储 移动开发 开发框架
使用UniApp实现视频数组自动下载与播放功能:一步步指导
使用UniApp实现视频数组自动下载与播放功能:一步步指导
248 0
|
小程序
UniApp video 使用(自定义进度条,及微信无法暂停播放设置进度问题)
UniApp video 使用(自定义进度条,及微信无法暂停播放设置进度问题)
1336 0
|
3月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的电影播放平台附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的电影播放平台附带文章和源代码部署视频讲解等
24 0
|
2月前
|
JavaScript
uniapp+uView 【详解】录音,自制音频播放器
uniapp+uView 【详解】录音,自制音频播放器
100 0
|
JavaScript API
uniapp实现录音功能和播放功能
uniapp实现录音功能和播放功能
|
4月前
|
JavaScript
uniapp计算视频学习进程,并且下次回来继续播放(不能快进)
uniapp计算视频学习进程,并且下次回来继续播放(不能快进)
172 0
|
4月前
uniapp音频加进度条加蓝牙ibecon设备搜索
uniapp音频加进度条加蓝牙ibecon设备搜索
57 0
|
4月前
uniapp制作录音播放功能
uniapp制作录音播放功能
191 0
|
4月前
uniapp后台播放音频功能制作
uniapp后台播放音频功能制作
213 0