zoukankan      html  css  js  c++  java
  • 微信小程序做radio,可以拖动进度条

    很简单的一个音乐播放器

    data:{

    src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
    currentTime: 0,
    duration: 0,
    result: '00:00',
    isOpen:false,/**是否播放 */

    }

    onLoad: function (e) {
    // 使用 wx.createAudioContext 获取 audio 上下文 context
    this.audioCtx = wx.createAudioContext('myAudio')
    var that=this;
    wx.setNavigationBarTitle({
    title: that.data.name
    });
    },
    audioPlay: function () {
    this.audioCtx.play()
    this.setData({
    isOpen: true
    })
    },
    audioPause: function () {
    this.audioCtx.pause()
    this.setData({
    isOpen: false
    })
    },
     
    updata(e) {
    var that = this;
    // console.log((e.detail.currentTime / 100).toFixed(2))
    let duration = e.detail.duration.toFixed(2) * 100,
    currentTime = e.detail.currentTime.toFixed(2) * 100;
    that.setData({
    duration: duration,
    currentTime: currentTime
    })
    that.formatSeconds(currentTime / 100);
    },
    sliderChange(e) {
    var that = this
    that.setData({
    currentTime: e.detail.value
    })
    that.audioSeek(e.detail.value)
    },
    audioSeek: function (currentTime) {
    this.audioCtx.seek(currentTime / 100)
    },
     
    wxml
     
    <audio src="{{src}}" id="myAudio" bindtimeupdate="updata"></audio>
    <view class="progress">
    <text>{{result}}</text>
    <slider bindchange="sliderChange" step="2" value="{{currentTime}}" max="{{duration}}" class="slider" selected-color="#ff5e5e"/>
    <text>{{times}}</text>
    </view>
    <view class="audioOpen" bindtap="audioPlay" wx:if="{{!isOpen}}">
    <image src="../../../../style/images/icon28.png"/>
    </view>
    <view class="audioOpen" bindtap="audioPause" wx:if="{{isOpen}}">
    <image src="../../../../style/images/icon31.png"/>
    </view>
  • 相关阅读:
    C#获取Excel Sheet名称,对特殊字符、重名进行了处理
    10个你必须知道的jQueryMobile代码片段
    HTML 5 学习之应用程序缓存
    JS取地址栏参数的两种方法
    关于AJAX+HTML5+ASHX进行全静态页面的数据交互
    重病后的重生
    非常值得学习的java 绘图板源代码
    C#开发者通用性代码审查清单
    【week3】四人小组项目—东师论坛
    【week2】结对编程-四则运算 及感想
  • 原文地址:https://www.cnblogs.com/yewook/p/9182753.html
Copyright © 2011-2022 走看看