HTML5 Audio and JavaScript Control


IE8 以下无效

?
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
<!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 有效：

?
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
<!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以下无效：

?
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!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><span>Select a track : </span></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>
                <span class="play-state"></span> :
                <span class="track-name">nothing</span>
                at <span class="extra-play-info"></span>
                of <span class="jp-duration"></span>, which is
                <span class="jp-current-time"></span>
            </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.
jMP3-javaScript-MP3-player.jpg
Source

2. jQuery Multimedia Portfolio

This plugin for jQuery will automatically detect the extension of each media and apply the adapted player.
jQuery-Multimedia-Portfolio.jpg
Source

3. jMedia

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

4. drPlayer

A simple and free jQuery plugin for creating MP3 playlists.
drPlayer.jpg
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.
Simple-Player-A-very-simple-HTML5-audio-player-plugin-for-jQuery.jpg
Source

6. jme

An HTML5 audio / video development kit with Flash Fallback, which focuses on flexibility, intuitive DOM-API and semantic code.
jme.jpg
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!
Night-coding-a-JQuery-plugin-for-StreamPlug.jpg
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.
jlEmbed-For-jQuery.jpg
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.
jPlayer-The-jQuery-HTML5-Audio-or-Video-Library.jpg
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.
The-Cloud-Player-Web-based-iTunes-Clone-using-jQuery.jpg
Source

posted @   ®Geovin Du Dream Park™  阅读(713)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
历史上的今天：
2011-11-30 CSS DIV Shadow
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 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 1 2 3 4 5
点击右上角即可分享
微信分享提示