vue3.0 安卓和ios h5 移动端音频自定义圆环可拖拽播放（兼容微信浏览器）

安装  npm install weixin-js-sdk

引入

import wx from 'weixin-js-sdk'

<template>

    <div class="circle_box">

        <div id="content"></div>

         <img class="img_0" src="https://img.yzcdn.cn/vant/cat.jpeg" alt="">

         <img @click="changeType" class="img_1" v-show="playbool" src="@/assets/decompression/pressure_audio_play.png" alt="">

         <img @click="changeType" class="img_1" v-show="!playbool" src="@/assets/decompression/pressure_audio_pause.png" alt="">

         <div v-show="false">

            <audio ref="audio" controls @timeupdate="updateTime">

             <source src="@/assets/decompression/tiankong.mp3" type="audio/mpeg">

            </audio>

         </div>

    </div>

</template>

<script>

import wx from "weixin-js-sdk";

export default {

    data(){

        return{

            value:'',

            outColor:'',

            playbool:true,

            second:0,

            than:''

        }

    },

    mounted(){

        this.init()

        this.main()

    },

    methods:{

        init(){

            let that = this

            let u = navigator.userAgent;

            //ios手机

            var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

            if(isIOS){

                this.$nextTick(() => {

                    this.autoPlayAudio();

                })

            }else{

                this.$nextTick(() => {

                let time = setTimeout(function () {

                        let audio = that.$refs.audio;

                        //音频总时长 秒

                        that.second = audio.duration;

                        that.than = 100/audio.duration;

                        that.$parent.calculationTime(audio.duration);

                        clearInterval(time);

                    }, 500)

                })

            }

        },

        autoPlayAudio() {

            let ua = window.navigator.userAgent.toLowerCase();

            let that = this;

            let audio = this.$refs.audio;

            if(ua.match(/MicroMessenger/i) == 'micromessenger'){

                //微信浏览器

                wx.config({

                    debug: false,

                    appId: '',

                    timestamp: 1,

                    nonceStr: '',

                    signature: '',

                    jsApiList: []

                });

               wx.ready(function() {

                audio.play();

                audio.pause();

                let time = setTimeout(function () {

                        if(audio.duration>0){

                            //音频总时长 秒

                            that.second = audio.duration;

                            that.than = 100/audio.duration;

                            that.$parent.calculationTime(audio.duration);

                        }else{

                            that.autoPlayAudio();

                        }

                        clearInterval(time);

                    }, 500)

                });

            }else{

                let time = setTimeout(function () {

                    if(audio.duration>0){

                        //音频总时长 秒

                        that.second = audio.duration;

                        that.than = 100/audio.duration;

                        that.$parent.calculationTime(audio.duration);

                    }else{

                        that.autoPlayAudio();

                    }

                    clearInterval(time);

                }, 500)

            }

        },

        //监测播放进度

        updateTime(){

           let audio = this.$refs.audio;

           let time = Number(this.second)-Number(audio.currentTime);

           this.$parent.calculationTime(time);

           this.draw(this.than*audio.currentTime);

        },

        changeType(){

          this.playbool = !this.playbool;

          let audio = this.$refs.audio;

          if(this.playbool){

            //暂停

             audio.pause()

          }else{

            audio.play()

          }

        },

        event(dom) {  //事件绑定

            if(this.isMobile){

                dom.addEventListener("touchstart", this.OnMouseDown.bind(this), false);

                dom.addEventListener("touchmove", this.throttle(this.OnMouseMove.bind(this)), false);

                dom.addEventListener("touchend", this.OnMouseUp.bind(this), false);

                return

            }

            dom.addEventListener("mousedown", this.OnMouseDown.bind(this), false);

            dom.addEventListener("mousemove", this.throttle(this.OnMouseMove.bind(this)), false);

            dom.addEventListener("mouseup", this.OnMouseUp.bind(this), false);

        },

        OnMouseDown(evt) {

            let audio = this.$refs.audio;

            //暂停音频

            audio.pause()

            this.clearLocation(evt);

            let range = 10;

            let X = this.getx(evt);

            let Y = this.gety(evt);

            let P = this.P

            let minX = P.x - this.slider - range;

            let maxX = P.x + this.slider + range;

            let minY = P.y - this.slider - range;

            let maxY = P.y + this.slider + range;

            if (minX < X && X < maxX && minY < Y && Y < maxY) {   //判断鼠标是否在滑块上

            this.isDown = true;

            } else {

            this.isDown = false;

            }

        },

        main(){

            const dom = document.getElementById("content")

            const obj = {

                el: dom,

                startDeg:1.5    ,

                endDeg: 3.5,

                outColor: 'rgba(50, 50, 70, .2)',

                counterclockwise: false

            }

            this.constructor(obj)

        },

        constructor(param) {

            this.initParam(param)

            this.draw(this.value)

        },

        initParam(param) {

            const {

            el,

            startDeg = 1.5,

            endDeg = 3.5,

            outColor = "rgba(50, 50, 70, .2)",

            innerLineWidth = 1,

            outLineWidth = 5,

            counterclockwise = true,

            slider = 8,

            color = ["#ffffff", "#ffffff"],

            sliderColor = "#fff",

            sliderBorderColor = "#33aaff",

            value = 0,

            change = (v)=> {  },

            textShow = true

            } = param;

            this.el = el;

            this.width = el.offsetWidth;

            this.height = el.offsetHeight;

            this.center = this.width / 2

            this.radius = this.width / 2 - 30; //滑动路径半径

            this.initCanvas(el);

            this.startDeg = startDeg;

            this.endDeg = endDeg;

            this.outColor = outColor;

            this.innerLineWidth = innerLineWidth;

            this.outLineWidth = outLineWidth;

            this.counterclockwise = counterclockwise;

            this.slider = slider;

            this.color = color;

            this.sliderColor = sliderColor;

            this.sliderBorderColor = sliderBorderColor;

            this.value = value;

            this.textShow = textShow;

            this.change = change;

            this.isDown = false;

            this.event(el)

        },

        OnMouseMove(evt) {

            if (!this.isDown) return;

            let evpoint = {};

            evpoint.x = this.getx(evt);

            evpoint.y = this.gety(evt);

            let point = this.spotchangeXY(evpoint);

            let deg = this.XYToDeg(point.x, point.y);

            deg = this.counterclockwise ? deg : Math.PI * 2 - deg;

            let val = (deg/ Math.PI - this.startDeg) / (this.endDeg - this.startDeg)  * 100

            if(val<0) val = 100 + val;

            if(val >= 100) val = 100;

            if(val <= 0) val = 0;

            if(Math.abs (val - this.value) > 10) return;

            //音频定位播放

            let time = val/this.than;

            let audio = this.$refs.audio;

            audio.currentTime = time

            this.animate = requestAnimationFrame(this.draw.bind(this,val));

            if(this.value != Math.round(val)){

                this.value = Math.round(val);

                this.change(this.value)

            }

        },

        OnMouseUp(evt) {  //鼠标释放

            const _this = this

            cancelAnimationFrame(_this.animate);

            this.isDown = false;

            if(this.distance(evt)){

                this.playbool = false;

                let audio = this.$refs.audio;

                //播放音频

                audio.play()

            }

        },

        distance(evt){

            let x = this.getx(evt);

            let y = this.gety(evt);

            let distance = Math.abs(Math.sqrt(Math.pow(x - 135, 2) + Math.pow(y - 135, 2)));

            if(0<distance && distance<130){

                return true

            }else{

                return false

            }

        },

        //点击定位

        clearLocation(evt){

            let evpoint = {};

            evpoint.x = this.getx(evt);

            evpoint.y = this.gety(evt);

            let point = this.spotchangeXY(evpoint);

            let deg = this.XYToDeg(point.x, point.y);

            deg = this.counterclockwise ? deg : Math.PI * 2 - deg;

            let val = (deg/ Math.PI - this.startDeg) / (this.endDeg - this.startDeg)  * 100

            if(val<0) val = 100 + val;

            if(val >= 100) val = 100;

            if(val <= 0) val = 0;

            if(this.distance(evt)){

                this.animate = requestAnimationFrame(this.draw.bind(this,val));

                //音频定位播放

                let time = val/this.than;

                let audio = this.$refs.audio;

                audio.currentTime = time

                audio.play()

                audio.pause()

                if(this.value != Math.round(val)){

                    this.value = Math.round(val);

                    this.change(this.value)

                }

            }

        },

        //绘图

        draw(value) {

            this.ctx.clearRect(0, 0, this.width, this.width);

            this.ctx.save();

            let startDeg = this.counterclockwise ? Math.PI * (2 - this.startDeg) : Math.PI * this.startDeg

            let endDeg = this.counterclockwise ? Math.PI * (2 - this.endDeg) : Math.PI * this.endDeg

            // 绘制外侧圆弧

            this.ctx.beginPath();

            this.ctx.arc(this.center, this.center, this.radius, startDeg, endDeg, this.counterclockwise); // 绘制外侧圆弧

            this.ctx.strokeStyle = this.outColor;

            this.ctx.lineCap = "round";

            this.ctx.lineWidth = this.outLineWidth;

            this.ctx.stroke();

            let Deg = this.valToDeg(value)

            // 绘制可变圆弧

            let themeColor = (typeof this.color == 'String') ? this.color : this.setLinearGradient()

            this.ctx.beginPath();

            this.ctx.arc(this.center, this.center, this.radius, startDeg, Deg, this.counterclockwise); // 可变圆弧

            this.ctx.strokeStyle =  themeColor;

            this.ctx.lineCap = "round";

            this.ctx.lineWidth = this.outLineWidth;

            this.ctx.stroke();

            // 绘制滑块

            this.P = this.DegToXY(Deg)

            this.ctx.beginPath();

            this.ctx.moveTo(this.center, this.center);

            this.ctx.arc(this.P.x, this.P.y, this.slider, 0, Math.PI * 2, false); // 绘制滑块

            this.ctx.fillStyle = this.sliderColor;;

            this.ctx.fill();

        },

        initCanvas(dom) {

            this.canvas = document.createElement("canvas");

            this.canvas.setAttribute("id", "dragArc");

            this.canvas.setAttribute("width", this.width);

            this.canvas.setAttribute("height", this.width);

            dom.appendChild(this.canvas);

            this.ctx = this.canvas.getContext("2d");

            this.isMobile = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent);

        },

        //将值转化为弧度

        valToDeg(v) {

            let range = this.endDeg - this.startDeg;

            let val = range / 100 * v;

            if(this.counterclockwise && (val !=0) ) val = 2 -val;

            let startDeg = this.counterclockwise ? (2 - this.startDeg) : this.startDeg;

            return (startDeg + val) * Math.PI;

        },

        // 弧度转化为对应坐标值

        DegToXY(deg) {

            let d = 2 * Math.PI - deg;

            return this.respotchangeXY({

            x: this.radius * Math.cos(d),

            y: this.radius * Math.sin(d)

            })

        },

        //canvas坐标转化为中心坐标

        spotchangeXY(point) {

            const spotchangeX = (i) => {

            return i - this.center

            }

            const spotchangeY = (i) => {

            return this.center - i

            }

            return {

            x: spotchangeX(point.x),

            y: spotchangeY(point.y)

            }

        },

        //中心坐标转化为canvas坐标

        respotchangeXY(point) {

            const spotchangeX = (i) => {

            return i + this.center

            }

            const spotchangeY = (i) => {

            return this.center - i

            }

            return {

            x: spotchangeX(point.x),

            y: spotchangeY(point.y)

            }

        },

        setLinearGradient(){

            const grad  = this.ctx.createLinearGradient(0,0, 0,this.width);

            this.color.forEach((e, i) => {

                if(i == 0){

                    grad.addColorStop(0, e)

                }else  if(i == this.color.length - 1){

                    grad.addColorStop(1, e)

                }else{

                    grad.addColorStop(1/this.color.length * (i+1), e);

                }

            });

            return grad;

        },

        // 将坐标点转化为弧度

        XYToDeg(lx, ly) {

            let adeg = Math.atan(ly / lx)

            let deg;

            if (lx >= 0 && ly >= 0) {

            deg = adeg ;

            }

            if (lx <= 0 && ly >= 0) {

            deg = adeg + Math.PI;

            }

            if (lx <= 0 && ly <= 0) {

            deg = adeg + Math.PI;

            }

            if (lx > 0 && ly < 0) {

            deg = adeg + Math.PI * 2;

            }

            return deg

        },

        //获取鼠标在canvas内坐标x

        getx(ev) {

            if(!this.isMobile) return ev.clientX - this.el.getBoundingClientRect().left;

            if(ev.touches.length){

                return ev.touches[0].pageX - this.el.getBoundingClientRect().left;

            }else{

                return ev.changedTouches[0].pageX - this.el.getBoundingClientRect().left;

            }

        },

        //获取鼠标在canvas内坐标y

        gety(ev) {

            if(!this.isMobile) return ev.clientY - this.el.getBoundingClientRect().top;

            if(ev.touches.length){

                 return ev.touches[0].pageY - this.el.getBoundingClientRect().top;

            }else{

                return ev.changedTouches[0].pageY - this.el.getBoundingClientRect().top;

            }

        },

        //节流

        throttle(func) {

            let previous = 0;

            return function() {

                let now = Date.now();

                let context = this;

                let args = arguments;

                if (now - previous > 10) {

                    func.apply(context, args);

                    previous = now;

                }

            }

        },

    }

}

</script>

<style scoped>

.circle_box{

     position: relative;

     padding-top: 130px;

     top: 0;

     left: 0;

     width: 100%;

     height: 245px;

}

#content{

  position: absolute;

  left: 50%;

  transform: translateX(-50%);

  height: 240px;

  width: 270px;

}

.img_0{

  position: absolute;

  top: 175px;

  left: 50%;

  transform: translateX(-50%);

  width: 180px;

  height: 180px;

  border-radius: 50%;

  z-index: 5;

}

.img_1{

  position: absolute;

  left: 50%;

  transform: translateX(-50%);

  top: 243px;

  width: 34px;

  height: 46px;

  z-index: 10;

}

.posi{

    position: absolute;

    left: 0;

    top: 10px;

    z-index: 1000;

}

</style>文章来源地址https://www.toymoban.com/news/detail-422072.html

到了这里，关于vue3.0 安卓和ios h5 移动端音频自定义圆环可拖拽播放（兼容微信浏览器）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！