jQuery Mobile MP3 播放器示例答案

【问题标题】：JQuery Mobile MP3 player examplejQuery Mobile MP3 播放器示例
【发布时间】：2011-05-05 04:18:18
【问题描述】：

我不知道如何使用 JQuery Mobile 播放本地 MP3 文件。我试过弄乱 JPlayer，但我无法让它工作。有没有人成功地在 JQuery Mobile 中播放音频文件？你能提供的任何东西都会很棒:)

谢谢。

【问题讨论】：

这看起来很眼熟...stackoverflow.com/questions/5818649/…

标签： jquery audio mp3 jquery-mobile html5-audio

【解决方案1】：

<!DOCTYPE HTML>
<html>
<head>
    <meta name="viewport" content="width=screen.width; user-scalable=no" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Audio Player</title>
    <link href="skin/jplayer.blue.mobile.css" rel="stylesheet" type="text/css" />
    <link href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" rel="stylesheet" />
    <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
    <script type="text/javascript" src="js/jquery.jplayer.js"></script>
</head>
<body>
    <div data-role="page" data-theme="a">
        <div data-role="header" data-nobackbtn="true" data-theme="b">
            <h1>Audio Player</h1>
        </div> <!-- /header --> 
        <div data-role="content" id="content-manual" data-theme="a">
            <div class="jp-video jp-video-270p">
                <div class="jp-type-single">
                    <div id="jquery_jplayer_1" class="jp-jplayer"></div>
                    <div id="jp_interface_1" class="jp-interface">
                        <div class="jp-video-play"></div>
                        <div class="jp-progress">
                            <div class="jp-seek-bar">
                                <div class="jp-play-bar"></div>
                            </div>
                        </div>
                        <div id='duration'>
                            <div class="jp-current-time"></div>
                            <div class="jp-duration"></div>
                        </div>
                        <ul class="jp-controls">
                            <li><a href="#" class="jp-play" tabindex="1">play</a></li>
                            <li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
                            <li><a href="#" class="jp-stop" tabindex="1">stop</a></li>
                            <li><a href="#" class="jp-mute" tabindex="1">mute</a></li>
                            <li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>
                        </ul>
                        <div class="jp-volume-bar">
                            <div class="jp-volume-bar-value"></div>
                        </div>
                    </div>
                    <div id="jp_playlist_1" class="jp-playlist">
                        <ul>
                            <li>Big Buck Bunny Trailer</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div> <!-- /content-manual -->
    </div> <!-- /page -->
</body>
</html>

【讨论】：

【解决方案2】：

<script type="text/javascript">   
    $(document).ready(function() {
        paused = 0;    
        $("#jquery_jplayer_1").jPlayer( {    
            ready: function () {    
                $(this).jPlayer("setMedia", {
                    m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer_480x270_h264aac.m4v",
                    poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
                });
            },
            ended: function (event) {
                $("#jquery_jplayer_1").jPlayer("setMedia", {
                    m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer_480x270_h264aac.m4v",
                    poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
                });
                paused = 0;
            },
            pause: function (event) {       
                paused = 1;
                $("#jp_flash_0").css({"width":"0px"});
                $(".jp-video-play").show();
            },
            play: function(event) {
                if(paused == 1) {
                    $("#jp_flash_0").css({"width":"100%"});
                    $(".jp-video-play").show();
                }
                paused = 0;
            },
            swfPath: "js",    
            supplied: "m4v"
        });
    });    
</script>

【讨论】：