jquery - jQuery HTML5音频播放器插件难度

Question

我在尝试“使用jQuery插件来实现利用HTML5音频标签的功能齐全的音频播放器，并为不支持HTML5的浏览器提供Flash后备功能”时遇到问题。这是Tom Negrino和Dori Smith撰写的“JavaScript视觉快速入门指南，第八版”的第420页。

涉及三个文件:
script06.html
script06.css
script06.js

script06.css文件的第四行可能存在问题，即:src:local('☺')，url('mbPlayer / mbAudioFont / mb_audio_font.woff')。我正在使用记事本。我的浏览器是IE9，并且正在使用Vista。我不知道笑脸是如何进入代码的，以及它是否正确。这三个文件的编码为:

script06.css文件是:

  @font-face {         font-family:'mb_audio_fontRegular';         src:url('mbPlayer/mbAudioFont/mb_audio_font.eot');         src:local('☺'), url('mbPlayer/mbAudioFont/mb_audio_font.woff')         format('woff'),         url('mbPlayer/mbAudioFont/mb_audio_font.ttf')        format('truetype'),         url('mbPlayer/mbAudioFont/mb_audio_font-webfont_svg#webfontywr4YLri')         format('svg');         font-weight:normal;         font-style:normal; } .mbMiniPlayer span {         font:16px/20px "mb_audio_fontRegular","Webdings",sans-serif; } a.audio {         display:none; } .mbMiniPlayer table {         -moz-border-radius:5px;         -webkit-border-radius:8px;         border-radius:5px;         margin:5px; } .mbMiniPlayer.shadow table {         border:1px solid white;         -moz-box-shadow:#ccc 0px 0px 5px;         -webkit-box-shadow:#ccc 0px 0px 5px;         box-shadow:#ccc 0px 0px 5px; } .mbMiniPlayer.black td {         margin:0;         padding:0; } .jp-progress {         position:relative;         background-color:#fff;         height:8px;         margin:2px;         margin-top:0;         top:-2px;         -moz-box-sizing:         border-box;         cursor:pointer; } .jp-load-bar {         background-color:#e9e6e6;         height:6px;         -moz-box-sizing:         border-box; } .jp-play-bar {         background-color:black;         background-image:         -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7D7D7D), to(#262626), color-stop(.6,#333));         height:6px;         -moz-box-sizing:border-box; } .mbMiniPlayer td.controlsBar {         background-color:#ccc;         background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#DEDEDE), to(#FFF), color-stop(.6,#FFF));         margin:0;         padding:0;         cursor:default !important;         box-shadow:inset 1px 1px 2px #999;         -moz-box-shadow:inset 1px 1px 3px #999;         -webkit-box-shadow:inset 1px 1px 2px #999; } .mbMiniPlayer .controls {         margin:1px;         display:none;         width:1px;         border:1px solid gray;         height:100%;         -moz-box-sizing:border-box;         overflow:hidden;         white-space:nowrap; } .mbMiniPlayer span {         display:inline-block;         padding:3px;         width:20px;         height:20px;         color:white;         text-align:center;         text-shadow:1px -1px 1px #000;         background-image:-webkit-gradient(linear, 0% 5%, 85% 100%, from(transparent), to(rgba(100, 100, 100,0.5))); } .mbMiniPlayer span.title {         position:relative;         color:#333;         font:10px/12px sans-serif;         text-shadow:none !important;         letter-spacing:1px;         width:100%;         height:8px;         top:-4px;         background:transparent !important;         text-align:left;         cursor:default !important; } .mbMiniPlayer span.rew {         width:1px;         cursor:pointer; } .mbMiniPlayer span.volumeLevel a {         position:relative;         display:inline-block;         margin:0;         margin-right:2px;         width:2px;         padding:0;         background-color:white;         height:0;         vertical-align:bottom;         opacity:.1;         cursor:pointer; } .mbMiniPlayer span.volumeLevel a.sel {         -moz-box-shadow:#000 0px 0px 1px;         -webkit-box-shadow:#000 0px 0px 1px;         box-shadow: #000 0px 0px 1px; } .mbMiniPlayer span.time {         width:1px;         font:11px/20px sans-serif;         overflow:hidden;         white-space:nowrap;         cursor:default !important;         text-shadow:0 0 2px #999!important; } .mbMiniPlayer span.play {         -moz-border-radius:0 5px 5px 0;         -webkit-border-top-right-radius:5px;         -webkit-border-bottom-right-radius:5px;         border-radius:0 5px 5px 0;         cursor:pointer; } .mbMiniPlayer span.volume {         -moz-border-radius:5px 0 0 5px;         -webkit-border-top-left-radius:5px;         -webkit-border-bottom-left-radius:5px;         border-radius:5px 0 0 5px;         cursor:pointer; } .mbMiniPlayer.black span {         background-color:#666;         text-shadow:1px -1px 1px #000; } .mbMiniPlayer.black span.play {         border-left:1px solid #333; } .mbMiniPlayer.black span.volume {         border-right:1px solid #999; } .mbMiniPlayer.black span.volume.mute {         color:#999; }

script06.html文件的编码为:

<!DOCTYPE html><html>
<head>
<title>Audio player</title>
<link rel="stylesheet" href="script06.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="mbPlayer/jquery.mb.miniPlayer.js"></script>
<script src="mbPlayer/jquery.jplayer.min.js"></script>
<script src="script06.js"></script>
</head>
<body>
<h2>jQuery HTML5 audio player</h2>
<div>
    <a class="audio {ogg:'mbPlayer/Rhapsody_in_Blue.ogg'}" href="mbPlayer/Rhapsody_in_Blue.mp3">Rhapsody in Blue</a>
</div>
</body>
</html>

并且script06.js文件的代码是:

$(function () {
    $(".audio").mb_miniPlayer({
        width: 360,
        inLine: false,
        showRew: true,
        showTime: true
    });
});

我将不胜感激!!!

Answer 1

不要浪费您的时间，有很多不错的免费插件可以帮助您。试试video.js