html5的音频播放

最新推荐文章于 2023-05-28 13:39:05 发布

panda-star

最新推荐文章于 2023-05-28 13:39:05 发布

阅读量471

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/chinabestchina/article/details/78009231

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、简介

在html5中播放音频文件，使用audio标签，同时准备jquery.js 和audioplayer.js两个js文件，这两个文件网上都能下载的。

二、audio标签的主要属性

1、src ：音频文件的地址；
2、preload : 预加载音频资源，值通常为auto;
3、controls : 指可控制音频播放;

三、开发步骤

1、引入jquery.js

2、引入audioplayer.js

3、修改audioplayer.js中关于播放器的样式，简单的即是打开播放器显示，去掉默认的开始等显示，

如下代码片段，注释掉的是原代码，注释掉代码的上一行代码即为新加代码：

else if( canPlayType( audioFile ) ) isSupport = true;

//新加代码，即是去掉默认显示的开始等按钮
var thePlayer = $( '<div class="' + params.classPrefix + '">' + ( isSupport ? $( '<div>' ).append( $this.eq( 0 ).clone() ).html() : '<embed src="' + audioFile + '" width="0" height="0" volume="100" autostart="' + isAutoPlay.toString() +'" loop="' + isLoop.toString() + '" />' ) + '</div>' ),
   theAudio  = isSupport ? thePlayer.find( 'audio' ) : thePlayer.find( 'embed' ), theAudio = theAudio.get( 0 );

//下面两行是注释掉的代码
// var thePlayer = $( '<div class="' + params.classPrefix + '">' + ( isSupport ? $( '<div>' ).append( $this.eq( 0 ).clone() ).html() : '<embed src="' + audioFile + '" width="0" height="0" volume="100" autostart="' + isAutoPlay.toString() +'" loop="' + isLoop.toString() + '" />' ) + '<div class="' + cssClass.playPause + '" title="' + params.strPlay + '"><a href="#">' + params.strPlay + '</a></div></div>' ),
//     theAudio  = isSupport ? thePlayer.find( 'audio' ) : thePlayer.find( 'embed' ), theAudio = theAudio.get( 0 );

if( isSupport )
{
   //新加代码，显示音频播放器
   thePlayer.find( 'audio' ).css( { 'width': '450px', 'height': 0, 'visibility': 'show' } );


   //下面两行是注释掉的代码
   // thePlayer.find( 'audio' ).css( { 'width': '450px', 'height': 0, 'visibility': 'show' } );
   // thePlayer.append( '<div class="' + cssClass.time + ' ' + cssClass.timeCurrent + '"></div><div class="' + cssClass.bar + '"><div class="' + cssClass.barLoaded + '"></div><div class="' + cssClass.barPlayed + '"></div></div><div class="' + cssClass.time + ' ' + cssClass.timeDuration + '"></div><div class="' + cssClass.volume + '"><div class="' + cssClass.volumeButton + '" title="' + params.strVolume + '"><a href="#">' + params.strVolume + '</a></div><div class="' + cssClass.volumeAdjust + '"><div><div></div></div></div></div>' );

   var theBar         = thePlayer.find( '.' + cssClass.bar ),

4、在jquery中调用音频播放

$(function () {
    $("#audioId").audioPlayer();
})

四、代码实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<audio id="audioId" src="http://fs.w.kugou.com/201710101526/d3ad245f526d3a7700aa4a5f05a0583c/G116/M01/03/18/tA0DAFnaPUiABYh1ADwEG8BIiU8909.mp3"
       preload="auto" controls ></audio>

<script src="../lib/js/jquery-3.0.0.js" ></script>
<script src="../lib/js/audioplayer.js" ></script>
<script>
    $(function () {
        $("#audioId").audioPlayer();
    })
</script>
</body>
</html>