黄聪:原生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: ‘。。。。‘,

    width: ‘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,

     width: ‘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

原文地址:https://www.cnblogs.com/huangcong/p/9809714.html

时间: 2024-10-17 12:03:47

黄聪:原生js的音频播放器,兼容pc端和移动端(原创)的相关文章

音频播放器兼容

playSound(url); function playSound(url) { var borswer = window.navigator.userAgent.toLowerCase(); if ( borswer.indexOf( "ie" ) >= 0 ) { //IE内核浏览器 var strEmbed = '<embed name="embedPlay" src="'+url+'" autostart="tru

【jquery】一款不错的音频播放器——Amazing Audio Player

前段时间分享了一款视频播放器,点击这里.今天介绍一款不错的音频播放器——Amazing Audio Player. 介绍: Amazing Audio Player 是一个使用很方便的 Windows 和 MAC 应用程序,允许你创建 HTML5 音频播放器的网站.该音频播放器兼容 iPhone,ipad,Android,Chrome,Firefox,Safari,Opera 和 IE 7 / 8 / 9 / 10.同时它也可以发布成为一个 WordPress 的音频播放器插件,Joomla 音

基于canvas和Web Audio的音频播放器

wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件.通过wavesurfer.js你可以使用它来制作各种HTML5音频播放器,它可以在各种支持 Web Audio 的浏览器中工作.包括 Firefox, Chrome, Safari, Mobile Safari 和 Opera浏览器. 在线演示:http://www.htmleaf.com/Demo/201503151525.html 下载地址:http://www.htmleaf.com/html

HTML5和jQuery轻量级音频播放器

Light-AudioPlayer是一款基于jQuery,HTML5和CSS3的轻量级音频播放器插件.该音乐播放器采用CSS3制作界面,具有体积小,自适应各种屏幕等特点.可以在桌面和移动设备中正常工作.该音乐播放器的特点有: 轻量级:整个插件在JS.CSS压缩后最小只有4KB 快速响应:采用CSS3特性,自适应各种屏幕,使Light AudioPlayer在手机和平板上也能良好的运作 触摸支持:你可以用光标,也可以用你的手指.每一个动作都有它的触摸事件的定义和功能 JavaScript被禁用?不

Android通过意图使用内置的音频播放器

如果实现一个音频文件的播放,那么在应用程序中提供播放音频文件功能的最简单的方式是利用内置的"Music(音乐)"应用程序的功能--即使用系统自带的或已安装好的音乐播放器来播放指定的音频文件. 本例比较简单,下面直接给出源代码: 布局文件activity_main: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http:/

HTML5实现Winamp2.9音频播放器插件

Winamp2-js是一款使用html5和javascript来实现Winamp 2.9音频播放器的插件.该Winamp音频播放器插件有支持拖拽文件,自定义皮肤,支持可视化模式等特点.特点还有: 实际的Winamp皮肤文件存储在本地计算机上,你可以任意调用自己的Winamp 2皮肤. 可以通过拖拽.弹出按钮或"options"按钮来调用本地音频文件或皮肤. 有两种可视化模式:示波器和曲谱模式. 支持热键. 支持"Shade"迷你模式. 在线演示:http://www

IOS开发之简单音频播放器

今天第一次接触IOS开发的UI部分,之前学OC的时候一直在模拟的使用Target-Action回调模式,今天算是真正的用了一次.为了熟悉一下基本控件的使用方法,和UI部分的回调,下面开发了一个特别简易的音频播放器,来犒劳一下自己这一天的UI学习成果.在用到UI的控件时如果很好的理解之前博客在OC中的Target-Action回调模式,感觉控件的用法会很顺手.下面的简易播放器没有用到多高深的技术,只是一些基本控件和View的使用. 话不多说简单的介绍一下今天的音频播放器.在播放器中我们用到了UIP

关于HTML5中audio音频播放器的一些理解

最近由于工作需要音频,了解到了HTML5中新兴的audio音频播放器.关于它本身的自带的属性不过多介绍,但是需要着重提到的就是它自身就有play()和pause()两个函数可以拿来直接使用,也就是我们经常遇到的播放和暂停功能.下面是我写的实例,有兴趣的朋友可以下载附件观看.今天晚上能把这个问题搞出来,基本上HTML5中audio的一些常见,常用的需求都可以解决了.开心- <!DOCTYPE HTML> <html> <head> <meta charset=&qu

简单mp3音频播放器的实现

本篇主要介绍使用Mediaplayer实现mp3简易音乐播放器,程序运行界面如下 下面是代码实现,因为代码比较简单,注释已经比较明确了. public class PlayActivity extends Activity implements OnClickListener { private EditText filenameText; // 音频播放的主要类 private MediaPlayer mediaPlayer; private String filename; // 记录播放位