uniapp音频加进度条加蓝牙ibecon设备搜索

简介: uniapp音频加进度条加蓝牙ibecon设备搜索
html
<slider :value="num" :max="duration" @change="change" width="100%" :disabled="isSliderDisabled">
                </slider>
js
import {
        explain
    } from '@/api/api.js';
    export default {
        data() {
            return {
                iBeaconDevices: [], // 存储搜索到的iBeacon设备
                deviceId: [],
                data: [],
                url: getApp().globalData.url,
                innerAudioContext: null,
                num: 0, //秒
                int: null, //定时器
                duration: '111', //总时长
                isSliderDisabled: false,
                status: false,
                audio_status: false,
                type: 2
            }
        },
        // 下拉刷新
        onPullDownRefresh() {
            try {
                this.explain()
                uni.stopPullDownRefresh(); //停止刷新
            } catch (e) {}
        },
        onLoad() {
            this.explain()
        },
        methods: {
            play() {
                if (!this.status) {
                    this.int = setInterval(() => {
                        this.num++
                    }, 1000)
                    this.status = true
                    this.change({
                        detail: {
                            value: this.num
                        }
                    })
                } else {
                    this.status = false
                    clearInterval(this.int)
                    this.innerAudioContext.pause()
                }
            },
            change(e) {
                if (this.status) {
                    this.isSliderDisabled = true;
                    this.num = e.detail.value;
                    this.innerAudioContext.seek(e.detail.value)
                    setTimeout(() => {
                        this.innerAudioContext.play()
                        this.isSliderDisabled = false;
                    }, 500)
                }
            },
            box(deviceid) {
                console.log(deviceid, 99909);
                let that = this
                uni.openBluetoothAdapter({ //蓝牙初始化
                    success(res) {
                        uni.getLocation({
                            success(res) {
                                uni.startBeaconDiscovery({ //搜索蓝牙设备
                                    uuids: deviceid,
                                    success(res) {
                                        console.log(res, 888);
                                        uni.onBeaconUpdate((res) => { //监听蓝牙搜索到的设备
                                            console.log(res, 999);
                                            uni.hideLoading()
                                            that.type = 1
                                        })
                                    },
                                    fail(res) {
                                        console.log('暂未搜索到蓝牙设备', res);
                                        uni.showToast({
                                            title: '暂未搜索到蓝牙设备,请下拉刷新',
                                            icon: 'none'
                                        })
                                    }
                                })
                            },
                            fail(res) {
                                uni.showToast({
                                    title: '请打开位置信息,并下拉刷新',
                                    icon: 'none'
                                })
                            }
                        })
                    },
                    fail(res) {
                        console.log('蓝牙未打开', res);
                        uni.showToast({
                            title: '请打开蓝牙,并下拉刷新',
                            icon: 'none'
                        })
                    }
                })
            },
            async explain() {
                uni.showLoading({
                    title: '加载中...'
                })
                const res = await explain({
                    scenic_id: 3
                })
                this.data = res.data
                if (!this.audio_status) {
                    this.innerAudioContext = uni.createInnerAudioContext()
                    this.innerAudioContext.src = this.url + this.data[0].audio;
                    this.innerAudioContext.onCanplay(() => {
                        // 获取音频总时长,单位为秒
                        this.duration = this.innerAudioContext.duration
                        console.log('音频总时长:', this.innerAudioContext.duration, 9)
                    })
                }
                this.audio_status = true
                this.box([(res.data[0].deviceid)])
            }
        },
    }
相关文章
|
6月前
|
JavaScript Java Android开发
uniapp通过蓝牙传输数据 (安卓)
uniapp通过蓝牙传输数据 (安卓)
303 1
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的小型医院医疗设备管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的小型医院医疗设备管理系统附带文章源码部署视频讲解等
62 6
|
1月前
|
数据可视化 安全 Android开发
低代码可视化-uniapp蓝牙标签打印-代码生成器
低代码可视化-uniapp蓝牙标签打印-代码生成器
57 0
|
1月前
|
前端开发 JavaScript
uniapp纯CSS实现圆形进度条组件
uniapp纯CSS实现圆形进度条组件
93 0
|
5月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的文献搜索系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的文献搜索系统附带文章和源代码部署视频讲解等
44 7
基于ssm+vue.js+uniapp小程序的文献搜索系统附带文章和源代码部署视频讲解等
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的教学仪器设备销售网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的教学仪器设备销售网站附带文章源码部署视频讲解等
35 1
|
5月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的实验室设备管理系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的实验室设备管理系统附带文章和源代码部署视频讲解等
49 9
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的文献搜索系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的文献搜索系统附带文章源码部署视频讲解等
39 0
|
4月前
|
JavaScript
uniapp+uView 【详解】录音,自制音频播放器
uniapp+uView 【详解】录音,自制音频播放器
129 0
|
6月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的餐饮掌上设备点餐系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的餐饮掌上设备点餐系统的详细设计和实现(源码+lw+部署文档+讲解等)