Html 5音頻標籤自定義控件？

我覺得我在這裏瘋狂吃藥，因爲我無法弄清楚如何使用自定義控件呈現html 5音頻標籤。Html 5音頻標籤自定義控件？

我有這個網站，到目前爲止，它的工作原理沒有問題：

<audio controls preload='none'><source src='the url to the audio' type='audio/wav' /></audio>

我如何讓它只顯示播放按鈕，也許播放時，顯示暫停按鈕代替它。

從我讀，

默認情況下，該元素不會暴露任何類型的播放器控制的。您可以使用普通的舊HTML，CSS和 JavaScript創建自己的控件。該元素具有像play（）和pause（）這樣的方法和一個名爲currentTime的讀取/寫入屬性。還有讀/寫音量和靜音屬性。所以你真的擁有了你需要的一切來構建你自己的界面。
If you don’t want to build your own interface, you can tell the 
瀏覽器顯示一組內置控件。爲此，只需在標籤中包含控件屬性。

但我找不到任何使用自定義控件的例子。你如何獲得播放按鈕？

來源

2011-10-03 Levitikon

你創建你的元素，像這樣......

<audio id="yourAudio" preload='none'> 
    <source src='the url to the audio' type='audio/wav' /> 
</audio> 
<a href="#" id="audioControl">play!</a>

，並添加一些功能：

var yourAudio = document.getElementById('yourAudio'), 
    ctrl = document.getElementById('audioControl'); 

ctrl.onclick = function() { 

    // Update the Button 
    var pause = ctrl.innerHTML === 'pause!'; 
    ctrl.innerHTML = pause ? 'play!' : 'pause!'; 

    // Update the Audio 
    var method = pause ? 'pause' : 'play'; 
    yourAudio[method](); 

    // Prevent Default Action 
    return false; 
};

眼下，按鈕只是簡單的文本（「玩！」或「暫停！「），但你可以做任何你想要的CSS。而不是設置innerHTML，設置className，你很好走！

來源

2011-10-03 18:54:54 sdleihssirhc

Aaaaah，我看.. – Levitikon

尼斯！我從此創建了一個jsfiddle：http://jsfiddle.net/pLjM7/ –

我一直在嘗試使用圖形而不是播放器。將'audio'標籤中的樣式設置爲「display：none; width：0px; height：0px;」（顯示none在iPad上不起作用，因此額外的寬度-0和高度-0設置）。還不包括「controls」屬性應該工作。（不同的系統/瀏覽器&桌面VS iOS的所有行爲方式......）

如：

<head> 
<script> 
function EvalSound(soundobj) { 
    var thissound=document.getElementById(soundobj); 
    thissound.play(); 
} 
</script> 
</head> 

<body> 
Click the speaker to hear the sound. <a href="javascript:null()" onClick="EvalSound('sound1'); return false;"> 
<img src="sound_icon.png" alt="" title="sound_icon" width="" height="" class="" /></a> 
<audio id="sound1" style="display: none; width: 0px; height: 0px;" src="sound.mp3" controls preload="auto" autobuffer> 
</body>

的「的javascript：空（）」結合iPad的作品「返回false;」而不是通常的「＃」。

更多真正有用的信息： http://www.phon.ucl.ac.uk/home/mark/audio/play.htm

來源

2012-11-14 01:57:37 Johnathan

您不必將樣式設置爲「display：none;」。如果你看起來你有一個「控制」標籤。這作爲布爾值來指定是否顯示玩家。只要擺脫這一點，你將不必包含任何內聯的CSS。 – Booker

不幸的是，上面的'更真實有用的信息'鏈接似乎被打破，目標蒸發。 – Opsimath

如果你想內置的播放按鈕，只有你可以：

使用autio標籤的class屬性：

<audio controls preload='auto' class="audio_volume_only"><source src='the url to the 
audio' type='audio/mp3' /></audio>

氣盛css：

.audio_volume_only { 
    width: 35px; 
    }

我希望controls有一些參數，but not found any or misunderstood ..我們將會看到。

然後可能使用audio's onplay - event將css更改爲您的需要。播放按鈕將成爲內置控件

的暫停按鈕，也有人指出，你總是可以讓你自己....

來源

2014-01-14 16:21:40 womd

Html 5音頻標籤自定義控件？

回答

相關問題