当前位置:首页 / 网页制作 / html5教程 / phonegap播放音频介绍
phonegap播放音频介绍
芯晴素材特效 分类:html5教程 发布日期:2018-05-11

这次给大家带来phonegap播放音频详解,phonegap播放音频详解的注意事项有哪些,下面就是实战案例,一起来看一下。

实例如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Compass Example</title>
   
        <script type="text/javascript" charset="UTF-8" src="cordova.js"></script>
        <script type="text/javascript" charset="UTF-8">
            document.addEventListener("deviceready", onDeviceReady, false);
   
            function onDeviceReady() {
            }
               
            var my_media=null;
            var mediaTimer=null;
               
            function playAudio(src){
                my_media=new Media(src,onSuccess,onError);
                my_media.play();
                   
                if(mediaTimer==null){
                    mediaTimer=setInterval(function(){
                        my_media.getCurrentPosition(
                            //成功回调
                            function(position){
                            if(position>-1){
                                setAudioPosition((position/1000)+"sec");
                            }
                        },
                        //错误回调
                        function (e){
                            console.log("Error getting pos="+e);
                            setAudioPosition("Error: "+e);
                        }
                        );
                    },1000);
                }
            }
               
            function pauseAudio(){
                if(my_media){
                    my_media.pause();
                }
            }
               
            function stopAudio(){
                if(my_media){
                    my_media.stopAudio();
                }
                clearInterval(mediaTimer);
                mediaTimer=null;
            }
               
            function onSuccess(){
                console.log("playAudio():Audio Success");
            }
               
            function setAudioPosition(position){
                document.getElementById('audio_position').innerHTML=position;
            }
   
            //错误的回调 
            function onError(error) {
                alert('code:'+error.code+'\n'+'message:'+error.message+'\n');
            }
               
        </script>
    </head>
   
    <body>
        <a href="#" onclick="playAudio('http://example.com/audio.mp3');">Play Audio</a>
        <a href="#" onclick="pauseAudio();">Pause Playing Audio</a>
        <a href="#" onclick="stopAudio();">Stop Playing Audio</a>
        <p id="audio_position"></p>
    </body>
   
</html>

版权信息:本站所有资源仅供学习与参考,请勿用于商业用途,如有侵犯您的版权,请及时联系821794221#qq.com(#换@),我们将尽快处理。

您可能在找这些

热门素材

jQuery金币抽奖效果网页下载下载

2017-03-14   浏览:184

jQuery简易日历插件下载

2017-03-13   浏览:505

支持背景图片的圆角效果的矩形

2013-01-09   浏览:8002

仿win7界面弹出窗口放大缩小网页下载

2017-03-14   浏览:116

jQuery实现图片滑动导航

2017-03-16   浏览:439

jQuery心型图片墙鼠标悬浮变大

2017-03-17   浏览:497

jQuery+CSS3实现黑色圆形时钟网页下载

2017-03-13   浏览:444

jQuery手机端上拉下拉刷新页面网页下载

2017-03-14   浏览:274

jQuery房地产贷款计算器网页下载

2017-03-13   浏览:453

JS实现文字从页面顶部掉下来的效果

2013-01-11   浏览:8445

jQ OSX底部工具箱

2017-03-18   浏览:343

一款红色风格JS+CSS竖向tab选项卡

2013-01-14   浏览:9290