3358 www.Sina.com/http://www.Sina.com/http://www.Sina.com/http://www.Sina.com /
33558 www.Sina.com/:要在网页上制作音乐播放器，请使用新标签audio src='素材音乐' controls/audio； 我们的这个音乐播放不是使用单组，而是使用jQuery插件创建下拉框式的选择切换功能，所以仍然使用jQuery插件； 创建使用jQuery动态生成的歌曲选择器，并使用jQuery设置单击或焦点丢失事件。 如果能触发下一个切换效果就好了
audio中的属性和分析：
自动播放
自动播放
如果显示此属性，音频将在准备就绪时立即播放。
控制力
控制力
如果显示此属性，则向用户显示播放按钮等控件。
loop
loop
如果显示此属性，则每次音频结束时将重新开始播放。
预加载
预加载
如果显示此属性，则在加载页面时加载音频，并准备播放。
使用" autoplay "时，将忽略此属性。
src
网址
要播放的音频的URL。
开发工具与关键技术：:要创建失去焦点的事件，以便在歌曲选择下拉框失去焦点时播放器切换到相应的歌曲：
$('.music ' ).change(function ) ) )。
//设置失去焦点的事件
varsrc=$(this ).val )；
//获取当前点击的内容
$('#aa ' ).text ('歌曲： ' src ' ) )。
//赋值显示当前歌曲
$'#PP'(.empty )；
//清空子元素
$('#pp ' ).append(audiosrc='素材/music/' src '.MP3 ' controls/audio ' )
//用赋值设定播放歌曲
() )
完成后效果参考，如图：
源代码仅供参考：
！ doctypehtmlhtmlheadmetacharset=' utf-8 ' title音频播放接口/titlestyletype=' text/CSS '.first { height 3360 auto； width: 630px； margin : 0自动； 文本对齐3360中心； }.box {height: 300px； width: 630px； 背景色： # fff； margin : 0自动； border : 1px固态天空蓝； border-radius 336015 px 15 px 15 px 15 px； }.left {left: 10px； margin : 0自动； height :自动； width :自动； 浮点：左； 后台- repeat :否- repeat； }.right {height: 300px； padding-top: 100px； position: relative； }.pp{position: absolute； bottom: 5px； right: 30px； }/stylelinkrel=' style sheet ' href='素材/jQuery插件/CSS/bootstrap.min.CSS '/headbodydivclass=' first ' H2音乐divdivclass=' box ' divclass=' left ' img src='素材/images/guang pan.gif ' alt=' '/divdivclass=' right ' a href=ap id='pp' class='pp'audio src='原材料/music/高贵玉米- you ' rebb divformselectclass=' form-control music ' id=' divscriptsrc='素材/jQuery插件脚本脚本$ (function ((vararr=[ ' gothic storm-whisperofhope ) main )，'高贵的玉米angetenar(emrekabakremix )- Emre Kabak )、' jesusarmyf.tenirasturm-thank you (djandreysaninradioedit ) ' chenreminar ' function(index，item ) $ ).music ).append ) ' option'item' $ () aa ).text ) (歌曲： ' src ' ) ) ) #PP $ () (PP ).append )、audiosrc='素材/music/' src '.MP3 ' controls/audio ' ) /script/body/html