IE8 以下无效

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Playing Sound from JavaScript</title>
<script src="mootools-1.2.4-core.js"></script>
    <script src="sif_discussion.js"></script>
    <script language="JavaScript">

        var topic = 'audio';
        var comment_teaser = 'Please leave a comment...';
        window.onload = reload_comments;

    </script>
</head>

<body>
<h2><a name="simpleaudio"></a>Simple JavaScript Control</h2>
                <div class="audiocontainer">
                    <audio id="audiotag1" preload="auto"><source src="flute_c_long_01.wav" type="audio/wav"></audio>
                    <p>
                        <a href="javascript:play_single_sound();">Play 5-sec sound on single channel</a>
                    </p>
                </div>
                <script type="text/javascript">
                    function play_single_sound() {
                        document.getElementById('audiotag1').play();
                    }
                </script>


<h2><a name="rotatingaudio"></a>Rotating Audio Channels</h2>
                <div class="audiocontainer">
                    <audio id="multiaudio1" src="flute_c_long_01.wav" preload="auto"></audio>
                    <audio id="multiaudio2" src="piano_chord.wav" preload="auto"></audio>
                    <audio id="multiaudio3" src="synth_vox.wav" preload="auto"></audio>
                    <audio id="multiaudio4" src="shimmer.wav" preload="auto"></audio>
                    <audio id="multiaudio5" src="sweep.wav" preload="auto"></audio>
                    <p>
                        <a href="javascript:play_multi_sound('multiaudio1');">Flute</a><br />
                        <a href="javascript:play_multi_sound('multiaudio2');">Piano Chord</a><br />
                        <a href="javascript:play_multi_sound('multiaudio3');">Synth Vox</a><br />
                        <a href="javascript:play_multi_sound('multiaudio4');">Shimmer</a><br />
                        <a href="javascript:play_multi_sound('multiaudio5');">Sweep</a><br />
                    </p>
                </div>
                <script type="text/javascript">
                    var channel_max = 10;
                    audiochannels = new Array();
                    for (a=0;a<channel_max;a++) {
                        audiochannels[a] = new Array();
                        audiochannels[a]['channel'] = new Audio();
                        audiochannels[a]['finished'] = -1;
                    }
                    function play_multi_sound(s) {
                        for (a=0;a<audiochannels.length;a++) {
                            thistime = new Date();
                            if (audiochannels[a]['finished'] < thistime.getTime()) {
                                audiochannels[a]['finished'] = thistime.getTime() + document.getElementById(s).duration*1000;
                                audiochannels[a]['channel'].src = document.getElementById(s).src;
                                audiochannels[a]['channel'].load();
                                audiochannels[a]['channel'].play();
                                break;
                            }
                        }
                    }
                </script>             
</body>

</html>

  IE8 有效:

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Playing Sound from JavaScript</title>
</head>

<body>
<script type="text/javascript" language="JavaScript">
<!--
function playSound(audioURL) {
 if (document.all) document.all['BGSOUND_ID'].src=audioURL;
 else self.iplayer.location.replace('jsplayer.html?'+audioURL);
}

function stopSound() {
 if (document.all) document.all['BGSOUND_ID'].src='jsilence.mid';
 else self.iplayer.location.replace('jsplayer.html?stop');
}
//-->
</script>

<BGSOUND id="BGSOUND_ID" LOOP=1 SRC="jsilence.mid">
<!EMBED NAME="Bach" SRC="Bach.mid" LOOP=FALSE AUTOSTART=FALSE HIDDEN=TRUE MASTERSOUND!>
<form name=myform>
<input type=button value="Play Sound" onClick="playSound('Bach.mid')">
<input type=button value="Stop Sound" onClick="stopSound()">
</form>

</body>

</html>

 IE 8以下无效:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta charset="utf-8" />
<title>Demo : jPlayer as a text based audio player</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<meta content="audio player" name="keywords">
<meta content="audio player" name="description">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jplayer/jquery.jplayer.min.js"></script>
<script type="text/javascript">
//<![CDATA[

$(document).ready(function(){

    // Local copy of jQuery selectors, for performance.
    var my_jPlayer = $("#jquery_jplayer"),
        my_trackName = $("#jp_container .track-name"),
        my_playState = $("#jp_container .play-state"),
        my_extraPlayInfo = $("#jp_container .extra-play-info");

    // Some options
    var opt_play_first = false, // If true, will attempt to auto-play the default track on page loads. No effect on mobile devices, like iOS.
        opt_auto_play = true, // If true, when a track is selected, it will auto-play.
        opt_text_playing = "Now playing", // Text when playing
        opt_text_selected = "Track selected"; // Text when not playing

    // A flag to capture the first track
    var first_track = true;

    // Change the time format
    $.jPlayer.timeFormat.padMin = false;
    $.jPlayer.timeFormat.padSec = false;
    $.jPlayer.timeFormat.sepMin = " min ";
    $.jPlayer.timeFormat.sepSec = " sec";

    // Initialize the play state text
    my_playState.text(opt_text_selected);

    // Instance jPlayer
    my_jPlayer.jPlayer({
        ready: function () {
            $("#jp_container .track-default").click();
        },
        timeupdate: function(event) {
            my_extraPlayInfo.text(parseInt(event.jPlayer.status.currentPercentAbsolute, 10) + "%");
        },
        play: function(event) {
            my_playState.text(opt_text_playing);
        },
        pause: function(event) {
            my_playState.text(opt_text_selected);
        },
        ended: function(event) {
            my_playState.text(opt_text_selected);
        },
        swfPath: "../../dist/jplayer",
        cssSelectorAncestor: "#jp_container",
        supplied: "mp3",
        wmode: "window"
    });

    // Create click handlers for the different tracks
    $("#jp_container .track").click(function(e) {
        my_trackName.text($(this).text());
        my_jPlayer.jPlayer("setMedia", {
            mp3: $(this).attr("href")
        });
        if((opt_play_first && first_track) || (opt_auto_play && !first_track)) {
            my_jPlayer.jPlayer("play");
        }
        first_track = false;
        $(this).blur();
        return false;
    });

});
//]]>
</script>

<style>
<!--

.demo-container {
    border: 1px solid #009BE3;
    padding:0 20px;
    font-family: "Myriad Pro Regular","Trebuchet MS";
}

.demo-container a, .demo-container a:link, .demo-container a:visited, .demo-container a:hover, .demo-container a:focus, .demo-container a:active {
    color: #009BE3;
}

.demo-container ul {
    list-style-type:none;
    padding:0;
    margin:1em 0;
    width:100%;
    overflow:hidden;
}

.demo-container ul span {
    color: #A0A600;
}

.demo-container li {
    float:left;
    margin-right:1em;
}

.demo-container p span.track-name {
    color: #CC0090;
}

-->
</style>
</head>

<body>
    <div id="jquery_jplayer"></div>

        <!-- Using the cssSelectorAncestor option with the default cssSelector class names to enable control association of standard functions using built in features -->

        <div id="jp_container" class="demo-container">
            <ul>
                <li>Select a track : </li>
                <li><a href="http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3" class="track track-default">
                Cro Magnon Man</a></li>
                <li> | </li>
                <li><a href="http://www.jplayer.org/audio/mp3/Miaow-05-The-separation.mp3" class="track">
                The Separation</a></li>
                <li> | </li>
                <li><a href="http://www.jplayer.org/audio/mp3/Miaow-04-Lismore.mp3" class="track">
                Lismore</a></li>
                <li> | </li>
                <li><a href="http://www.jplayer.org/audio/mp3/Miaow-10-Thin-ice.mp3" class="track">
                Thin Ice</a></li>
            </ul>
            <p>
                 :
                nothing
                at 
                of , which is

            </p>
            <ul>
                <li><a class="jp-play" href="#">Play</a></li>
                <li><a class="jp-pause" href="#">Pause</a></li>
                <li><a class="jp-stop" href="#">Stop</a></li>
            </ul>
            <ul>
                <li>volume :</li>
                <li><a class="jp-mute" href="#">Mute</a></li>
                <li><a class="jp-unmute" href="#">Unmute</a></li>
                <li> <a class="jp-volume-bar" href="#">|<---------->|</a></li>
                <li><a class="jp-volume-max" href="#">Max</a></li>
            </ul>
        </div>

</body>

</html>

  

 

 

 参考财富:

/// https://github.com/CreateJS/SoundJS
/// http://madrobby.github.io/scriptaculous/sound/
/// https://css-tricks.com/examples/SoundOnHover/
/// https://github.com/scottschiller/SoundManager2/
/// http://www.schillmania.com/projects/soundmanager2/

http://www.sitepoint.com/10-jquery-audio/

http://devreactor.com/projects/drplayer.aspx

1. jMP3 (javaScript MP3 player)

This is an easy way make any MP3 playable directly on most any web site
(to those with Flash & JavaScript enabled), using the sleek Flash Single
MP3 Player & the fantabulous jQuery.
jQuery 1
Source

2. jQuery Multimedia Portfolio

This plugin for jQuery will automatically detect the extension of each
media and apply the adapted player.
jQuery 2
Source

3. jMedia

A jQuery plugin for unobtrusive, accessible and flexible multi-media
embedding.
jQuery 3
Source

4. drPlayer

A simple and free jQuery plugin for creating MP3 playlists.
jQuery 4
Source

5. Simple Player – A very simple HTML5 audio player plugin for jQuery

A jQuery plugin that allows web developers to control audio files on
their webpage. Supports style up via CSS. All browsers that supports
HTML5 audio tag that allow mp3 or ogg format supported by this plugin.
jQuery 5
Source

6. jme

An HTML5 audio / video development kit with Flash Fallback, which
focuses on flexibility, intuitive DOM-API and semantic code.
jQuery 6
Source

7. Night coding a JQuery plugin for StreamPlug

An advanced media player for the web: It decodes MPEG4 video streams
such as h264, and vorbis audio from a remote file using a simple http
server. This JQuery plugin will help you add a streamplug player on your
website/blog, a single line is sufficient to display the player to the
right size, and play the media on the fly, without any buffering time!
jQuery 7
Source

8. jlEmbed For jQuery

A plugin for jQuery, which makes it easier to add embedded media players
to your webpage. With support for Adobe Flash, Quicktime, Real Player,
Silverlight, Windows Media Player, and YouTube, you will no longer need
to hard-code lengthy, cumbersome, and invalid HTML for your music or
videos.
jQuery 8
Source

9. jPlayer – The jQuery HTML5 Audio / Video Library

Is the completely free and open source (GPL/MIT) media library. A jQuery
plugin, jPlayer allows you to rapidly weave cross platform audio and
video into your web pages. jPlayer’s comprehensive API allows you to
create innovative media solutions while support and encouragement is
provided by jPlayer’s active and growing community.
jQuery 9
Source

10. The Cloud Player- Web-based iTunes Clone using jQuery

The Cloud Player is a web-based music player that lets you.
> Find and play all tracks from SoundCloud
> Save playlist to your Google Account
> Make smart playlists based on genre, BPM, etc.
> Share your ready-made playlists with your friends and
> Collaborate in making the best playlists ever.
jQuery 10
Source

相关文章

网站地图xml地图