Giter Site home page Giter Site logo

daysdays / web_mp3 Goto Github PK

View Code? Open in Web Editor NEW

This project forked from fengyu1994/web_mp3

0.0 1.0 0.0 10.59 MB

网页中播放mp3文件,HTML5 audio(PC:Chrome、IE9+、Edge、Opera;Mobile:UC、QQ、微信、百度、欧朋、Chrome);需要Flash支持(firefox、IE6-8)

ActionScript 11.92% HTML 88.08%

web_mp3's Introduction

一、功能:

在浏览器中播放mp3文件

二、范围:

支持HTML5 Audio标签,且支持播放MP3格式文件:Chrome、Opera、IE9+、Edge
安装了Flash插件:Firefox、IE6-8
移动设备支持情况:UC、QQ、百度、微信、opera、chrome

三、使用方法(例):

var music = new Music('1.mp3', 'audio/mpeg', {'init' : v_init, 'play' : v_play, 'stop' : v_stop}, {'init' : e_init});
music.init();

四、代码结构:

  1、浏览器判断
  2、Music对象
  3、视图、事件方法回调具体实现

五、对象、变量。方法介绍:

5.1、浏览器判断

	exports.name:浏览器类别 (chrome|firefox|ie|opera|edge等)
	exports.version: ie获取的是(6|7|8|9|10|11)大版本号,其余浏览器获取具体版本号
  
5.2、Music对象
	外部方法:
		Music(url, type, viewCallback, eventCallback)
		功能:
			初始化Music对象
		参数:
			url: 音乐地址(本地|网络地址)
			type: 音乐类型 (目前仅支持audio|mpeg)
			viewCallback: 视图回调
			eventCallback: 事件回调
         
        init()
		功能:
			创建Audio或[Object|embed]对象,加载MP3资源
			赋值给this.musicEl,并声明this.musicEl的控制方法(play|stop|getPaused)
        
        emit()
		功能:
      		根据paused值,调用play()或stop()方法	
	内部方法:
		createAudioPlayer()
		功能:
			创建Audio对象
        
        createSwfPlayer()
		功能:
			创建object或embed对象
      	
      	play()
  		功能:
  			播放音乐,并调用播放视图回调
  			
  		stop()
  		功能:
  			停止音乐,并调用停止视图回调
  
5.3、公共方法
	canPlayAudioMP3()
	功能:
		判断浏览器能否使用audio标签播放mp3文件
        
	flashhtml(movieName, src, data)
	功能:
		根据浏览器版本创建不同的flash节点
	参数:
		moveieName :flash元素的id或name
		src :调用的swf文件
		data :传递的参数
      
	addEvent(el, etype, fn)
	功能:
		兼容绑定事件(addEventListenerattachEvent)
	参数:
		el :绑定事件的元素
		etpe :事件类型(click等)
		fn :绑定的方法
        
	m_console(msg)
	功能:
		支持console的情况下,在控制台输出信息
	参数:
		msg :需要控制台输出的信息
        
5.4、视图回调(可自定义拓展)
	v_init()
	功能:
		音频对象初始化后,视图回调
        
	v_play()
	功能:
		音频对象播放被触发时,视图回调
        
	v_stop()
	功能:
		音频对象停止被触发时,视图回调
        
	e_init()
	功能:
		音频对象初始化后,前端事件绑定

六、不足

仍有局限性,在不支持flash和audio标签的浏览器上(如mobile firefox)无法播放

七、致谢

@DamonOehlman (thank you for browser.js) 一段很精简的浏览器类型判断的js代码
@breily (thank you for jquery.player.js, show me a way that javasript communicate with actionsript ) 

资料:
http://zhidao.baidu.com/link?url=uqxSdCloRVdp-Hwkj46SGgnCl5h1v_JHpw8tTCbyq1yYT8CMEjOnOjvfHUAXpGFWKXiETKF585HyudAYbOQ1Ja
判断浏览器是否支持audio标签,且支持audio mp3播放
http://www.cnblogs.com/cos2004/p/3525111.html
IE8以下,需要减少addCallback数量至3个以内,从而解决js报错

web_mp3's People

Contributors

windyrain avatar fengyu1994 avatar

Watchers

daysdays avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.