Html 5 音频标签自定义控件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7638754/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Html 5 audio tag custom controls?
提问by Levitikon
I feel like I'm taking crazy pills here because I can not figure out how to render the html 5 audio tag with custom controls.
我觉得我在这里服用了疯狂的药丸，因为我无法弄清楚如何使用自定义控件呈现 html 5 音频标签。
I have this html so far, and it works no problem:
到目前为止，我有这个 html，它没有问题：
<audio controls preload='none'><source src='the url to the audio' type='audio/wav' /></audio>
How do I get it to display ONLY the play button, and perhaps when playing, show the pause button in it's place.
我如何让它只显示播放按钮，也许在播放时，在它的位置显示暂停按钮。
From what I read,
从我读到的，
By default, the element will not expose any sort of player controls. You can create your own controls with plain old HTML, CSS, and JavaScript. The element has methods like play() and pause() and a read/write property called currentTime. There are also read/write volume and muted properties. So you really have everything you need to build your own interface.
If you don't want to build your own interface, you can tell the browser to display a built-in set of controls. To do this, just include the controls attribute in your tag.
默认情况下，该元素不会公开任何类型的播放器控件。您可以使用普通的旧 HTML、CSS 和 JavaScript 创建自己的控件。该元素具有诸如 play() 和 pause() 之类的方法以及名为 currentTime 的读/写属性。还有读/写音量和静音属性。因此，您确实拥有构建自己的界面所需的一切。
如果您不想构建自己的界面，可以告诉浏览器显示一组内置控件。为此，只需在标签中包含控件属性。
But I can not find any examples of using custom controls. How do you get just the play button?
但我找不到任何使用自定义控件的示例。你如何获得播放按钮？
回答by sdleihssirhc
You create your elements like so...
你像这样创建你的元素......
<audio id="yourAudio" preload='none'>
<source src='the url to the audio' type='audio/wav' />
</audio>
<a href="#" id="audioControl">play!</a>
And add some functionality:
并添加一些功能：
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;
};
Right now, the button is just simple text ("play!" or "pause!"), but you could do just about anything you wanted with CSS. Instead of setting the innerHTML, set the classNameand you're good to go!
现在，按钮只是简单的文本（“播放！”或“暂停！”），但是您可以使用 CSS 做任何您想做的事情。而不是设置innerHTML，设置className，你很高兴去！
回答by Johnathan
I have been experimenting with the use of a graphic instead of the player. Set the style within the 'audio' tag to "display: none; width: 0px; height: 0px;" (display none does not work on iPad, thus the additional width-0 and height-0 settings). Also not including the "controls" attribute should work. (different systems/browsers & desktop vs iOS all act differently.....)
我一直在尝试使用图形而不是播放器。将 'audio' 标签内的样式设置为“display: none; width: 0px; height: 0px;” （显示 none 在 iPad 上不起作用，因此额外的 width-0 和 height-0 设置）。也不包括“控件”属性应该有效。（不同的系统/浏览器和桌面与 iOS 的行为都不同......）
Eg:
例如：
<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>
The "javascript:null()" works on iPad in conjunction with "return false;" as opposed to the usual "#".
“javascript:null()”在 iPad 上与“return false;”结合使用。与通常的“#”相反。
For more really useful information: http://www.phon.ucl.ac.uk/home/mark/audio/play.htm
更多真正有用的信息：http: //www.phon.ucl.ac.uk/home/mark/audio/play.htm
回答by womd
if you want the built-in play-button only you could:
如果您只想要内置播放按钮，您可以：
use autio-tag's class attribute:
使用 auto-tag 的 class 属性：
<audio controls preload='auto' class="audio_volume_only"><source src='the url to the
audio' type='audio/mp3' /></audio>
and fit the css:
并适合 css：
.audio_volume_only {
width: 35px;
}
i hoped controlshas some parameters, but not found any or misunderstood.. we'll see.
我希望控件有一些参数，但没有找到任何参数或被误解..我们会看到。
then possibly use audio's onplay - eventto change the css to your need. the play-button will become the pause-button in built-in controls
然后可能使用音频的 onplay - 事件将 css 更改为您的需要。播放按钮将成为内置控件中的暂停按钮
as others pointed out, you can always make your own....
正如其他人指出的那样，您始终可以自己制作....
