zoukankan      html  css  js  c++  java
  • 黄聪:原生js的音频播放器,兼容pc端和移动端(原创)

    更新时间:2018/9/3 下午1:32:54

    更新说明:添加音乐的loop设置和ended事件监听

    loop为ture的时候不执行ended事件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    const wx = new WxAudio({
        ele: '.wx-audio',
        title: '河山大好',
        disc: '许嵩',
        src: '。。。。',
         '320px',
        loop: true,
        ended: function() {
            var src = '。。。。'
            var title = '她说'
            var disc = '林俊杰'
            wx.audioCut(src, title, disc)
        }
    })

    发布时间:2018-4-4 1:01

    wx-audio

    微信公众号音乐播放器

    基于原生js写的一款仿微信公众号的音乐组件

    实例化 音乐组件

    1
    2
    3
    4
    5
    6
    7
    var wxAudio = new Wxaudio({
         ele: '#textaudio1',
         title: '河山大好',
         disc: '许嵩',
         src: 'http://.....mp3',
          '320px'
    });

    方法

    1
    2
    3
    4
    5
    6
    // 实例化的wxAudio可以这样操作
    wxAudio.audioPlay()   // 播放 
    wxAudio.audioPause()   // 暂停 
    wxAudio.audioPlayPause()  // 播放暂停 
    wxAudio.showLoading(bool)  //显示加载状态  参数bool  
     wxAudio的audioCut(src,title,disc)  实现音频切换的效果

    新增 音乐组件切歌方法

    通过实例化的wxAudio的audioCut(src,title,disc) 实现音频切换的效果  示例代码如下 

    1
    2
    3
    4
    var src = '.....mp3'
    var title = '她说'
    var disc = '林俊杰'
    wxAudio.audioCut(src, title, disc)

    网址:http://www.jq22.com/jquery-info18575

    下载:jq22wx-audio2691201804040100.zip

  • 相关阅读:
    2020年4月4日训练
    HZNU Training 17 for Zhejiang Provincial Competition 2020
    [kuangbin带你飞]专题四 最短路练习
    三分法
    洛谷多校第一周续
    洛谷春季 ACM 多校训练第五周
    简单数学三月小结
    线段树&树状数组
    图论三月小结
    Java中Double保留后小数位的几种方法
  • 原文地址:https://www.cnblogs.com/huangcong/p/9809714.html
Copyright © 2011-2022 走看看