jsaudio插件

❶ 如何使用javaScript控制Audio對象

HTML5 中的audio對象提供可用於通過JavaScript控制播放的方法、屬性以及事件。

在JavaScript中播放和暫停音頻播放
使用HTML5
audio元素可向網頁中添加音頻，而無需使用外部控制項或程序。但是，除非你的網頁只需要一個簡單的音頻播放器，否則你很可能想對載入的音頻文件及其播放
擁有更多的控制。若要將audio元素與 JavaScript 結合使用，請定義audio標記，該標記具有 "ID"
並且可以選擇省略其他所有內容。你可以顯示或隱藏內置控制項，或將音頻設置為在頁面載入時自動播放。使用
JavaScript，你仍然可以執行該操作並且還可以執行進一步操作。

在以下示例中，我們在 HTML 中使用簡單的 audio 標記語法。
<input type="text" id="audiofile" size="80" value="demo.mp3" />
音頻播放器的所有其他功能可通過JavaScript進行控制，如以下腳本所示。

var currentFile = "";
function playAudio() {
// Check for audio element support.
if (window.HTMLAudioElement) {
try {
var oAudio = document.getElementById('myaudio');
var btn = document.getElementById('play');
var audioURL = document.getElementById('audiofile');
//Skip loading if current file hasn't changed.
if (audioURL.value !== currentFile) {
oAudio.src = audioURL.value;
currentFile = audioURL.value;
}
// Tests the paused attribute and set state.
if (oAudio.paused) {
oAudio.play();
btn.textContent = "Pause";
}
else {
oAudio.pause();
btn.textContent = "Play";
}
}
catch (e) {
// Fail silently but show in F12 developer tools console
if(window.console && console.error("Error:" + e));
}
}
}
在示例的 HTML 部分，為audio元素指定id="myaudio" 和源文件"demo.mp3"。定義 id="play" 的按鈕和觸發 "playAudio()" JavaScript 函數的onclick事件。

在 JavaScript 部分中，使用
document.getElementById返回audio 對象。play和pause方法用於提供播放控制。檢索button
對象以便可以在「播放」和「暫停」之間切換按鈕標簽，具體情況取決於audio 對象的paused屬性的狀態。 每次調用 "playAudio"
函數時都會檢查該狀態。 如果音頻文件正在播放，則paused屬性返回false，並且調用pause方法來暫停播放。按鈕標簽也設置為「播放」。

如果文件已暫停，則paused屬性返回true，並且調用play方法，按鈕標簽更新為「暫停」。第一次載入文件時，即使尚未顯式調用 pause方法，paused屬性也返回 true（播放已暫停）。

在HTML代碼中，默認情況下按鈕處於禁用狀態。當頁面載入時，在主體標記中使用 onload 事件調用checkSupport() 函數。如果 audio元素存在，則啟用按鈕。

❷ html js audio，一首歌播完自動下一首歌，要怎麼做

HTML5中的audio對象有個屬性為 ended，改屬性是返迴音頻是否播放結束，是boolean類型的。

例如我自己寫的一個判斷：
this.audioPlay=function(soundPath,callback){
$("#shapeAudio").attr("src",soundPath);
var shapeAudio=document.getElementById("shapeAudio");
shapeAudio.play();

/*判斷聲音是否播放完成，播放完成之後執行回調函數*/
if(callback != undefined){
var is_playFinish = setInterval(function(){
if(shapeAudio.ended){
callback();
window.clearInterval(is_playFinish);
}
}, 10);
}
}

改判斷為當聲音播放完成之後再執行回調函數callback

❸ 怎樣為JavaScript做的程序添加音效

<div id="div_play1" style='display: none'></div>
<div id="div_play2" style='display: none'></div>
<script language="JavaScript" type="text/javascript">
function play()
{
var url = "youhaveamessage.mp3";
var div = document.getElementById('div_play1');
div.innerHTML = '<embed src="'+url+'" loop="1" autostart="true" hidden="true"></embed>';
var emb = document.getElementsByTagName('EMBED')[0];
if (emb) {
/* 這里可以寫成一個判斷 wav 文件是否已載入完畢，以下採用setTimeout模擬一下 */
div = document.getElementById('div_play2');
div.innerHTML = 'loading: '+emb.src;
setTimeout(function(){div.innerHTML='';},1000);
}
}
play();
</script>

❹ 怎樣用JavaScript代碼來控制audio的上一曲、下一曲、播放/暫停以及時間進度條

js audio對象可以實現

❺ html5 jquery audio player插件怎麼用

用法:
添加音頻元素、 設置的屬性，你需要和添加源。您將添加更多不同的來源，更多的用戶將能夠聽聽您的音頻 （因為沒有一個音頻格式跨所有瀏覽器支持)。三個例子：

<audio src="audio.wav" preload="auto" controls></audio>

這只是將預載入audio.wav文件並不會發揮它直到用戶單擊播放按鈕。nonemetadata） 的其他preload值將不預載入該文件。
autoplay時它會載入該文件，然後再loop它以這種方式：

指定多個音頻格式來解決前面提到的問題：

<audio preload="auto" controls>

<source src="audio.wav" />
<source src="audio.mp3" />
<source src="audio.ogg" />
</audio>
神秘controls嗎？它是一個布爾屬性不會影響任何方式中的插件，但可確保該瀏覽器的默認播放器是顯示和禁用 JavaScript 時顯示控制項與控制項。
最後一步 ― 調用插件

<audio src="audio.wav" preload="auto" controls></audio>

<script src="jquery.js"></script>
<script src="audioplayer.js"></script>
<script>
$( function()
{
$( 'audio' ).audioPlayer();
});
</script>

該插件，一些可選的參數。最重要的一個被稱為classPrefix。傳遞的值成為子元素的父元素和類名稱前綴的類名稱。其他選項只可能有利英語以外的語言。具有默認值的示例：

$( 'audio' ).audioPlayer(

{
classPrefix: 'audioplayer',
strPlay: 'Play',
strPause: 'Pause',
strVolume: 'Volume'
});

有一些類的名稱，被分配到父元素時：

音樂播放器版本― ― 正在播放音頻

<div class="audioplayer audioplayer-playing">

停止停止音樂播放器版本― ― 音頻
<div class="audioplayer audioplayer-stopped">

音樂播放器版本靜音― ― 卷處於靜音狀態

<div class="audioplayer audioplayer-muted">

音樂播放器版本 novolume ― ― 沒有音量調節是可用的：

<div class="audioplayer audioplayer-novolume">

重要提示：時不支持音頻元素或沒有任何給定的音頻文件是與瀏覽器兼容，玩家切換到迷你模式，基本上減少了播放機播放/暫停按鈕 （因為"嵌入"元素是有限的操作）：

<div class="audioplayer audioplayer-stopped audioplayer-mini">

<embed src="audio.wav" width="0" height="0" volume="100" autostart="false" loop="false" />
<div class="audioplayer-playpause" title="Play"><a href="#">Play</a></div>
</div>

❻ 點擊一個按鈕播放音樂，應用於 HTML，可以用JS插件

functiona(){
varaudio=document.getElementById('music');
if(audio.paused){
audio.play();//audio.play();//播放
}
else{
audio();
}
}
<!--上面是加入專js部分的屬-->
<audiosrc="click.mp3"controls="controls"preloadid="music"hidden></audio>
<buttonid="a"onclick="a();">播放/暫停</button>

❼ 如何用js控制audio元素連續播放mp3文件

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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<audio id="myaudio"></audio>
</body>
<script>
// window.onload = function() {

//頁面載入完成之後，通過給audio添加autoplay屬性，音頻下載完成之後自動播放
// var oAudio = document.getElementById('myaudio');
// oAudio.src = 'Le_Papillon.mp3';

// }
//mp3文件名
var mp3List = [
'Girlfriend.mp3',
'Have A Nice Day.mp3',
'Le Papillon.mp3',
'She Is.mp3',
'Tik Tok.mp3'
],
//文件路徑
baseUrl = '../music/';

function getMusic(list) {

var len = list.length,
num = parseInt(<a href="https://www..com/s?wd=Math.random&tn=44039180_cpr&fenlei=-w9Uz4Bmy-bIi4WUvYETgN-" target="_blank" class="-highlight">Math.random</a>()*len, 10),
music = baseUrl + list[num];

if(music) {

return music;

} else {

getMusic(list, baseUrl);

}

}
canPlay(playAudio);
//查看是否支持audio標簽，如果支持，預載入當前指向mp3文件
function canPlay(callback) {

var currentFile = getMusic(mp3List);
try {
var audio = new Audio();

audio.oncanplay = function() {
callback(currentFile);
}

audio.src = currentFile;

audio.load();
}catch(e){
callback(false, e);
}
}

//play
function playAudio(currentFile) {
// Check for audio element support.
if (window.HTMLAudioElement && currentFile) {
try {
var oAudio = document.getElementById('myaudio');

oAudio.src = currentFile;

if (oAudio.paused) {
oAudio.play();
}
else {
oAudio.pause();
}

oAudio.onended = function() {
oAudio.src = getMusic(mp3List);
oAudio.play();
}

}
catch (e) {
// Fail silently but show in F12 developer tools console
if(window.console && console.error("Error:" + e));
}
}
}
</script>
</html>

❽ 如何用js控制audio元素連續播放mp3文件

1、首先我們先來看一下音頻元素最基本的應用以及樣式，如下圖所示，運用audio元素即可內,controls是用來控制容是否顯示控制條。

❾ 屏幕左下方出現javascript:audio('lead-in.wma)但是沒有聲音

課件是什麼格式的呢？既然用到了JS，可能是
1、瀏覽器對Javascript的支持問題，
2、課件本身的問題，你寫的javascript:audio('lead-in.wma)從JS語法上來講是錯的，少一個引號，如果其他的效果都正常，就是沒有聲音，很可能是可見本身的代碼問題。

❿ 動態添加audio代碼，引入的audio.min.js和樣式無效，怎麼解決

<!doctype html>
<%@ page contentType="text/html;charset=UTF-8"%>
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<link href="index.css" rel="stylesheet">
</head>
<body>
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><button value="onclick" onclick="audio()">onclick</button>
</td>
</tr>
<tr>
<td><div id="f"></div></td>
</tr>
</table>
<script src="audio.min.js"></script>
<script>
audiojs.events.ready(function() {
audiojs.createAll();
});
</script>
<script type="text/javascript">
function audio() {
var a = '<audio id="d" src = "123.mp3" controls>';
$("#f").html(a);
}
</script></body>
</html>

這樣寫，js一般放到後面載入