我觉得我在这里吃疯狂的药丸,因为我无法弄清楚如何使用自定义控件渲染html 5音频标签。
我有这个HTML到目前为止,它没有问题:
<audio controls preload='none'><source src='the url to the audio' type='audio/wav' /></audio>
从我读的,
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.06001
browser to display a built-in set of controls. To do this,just
include the controls attribute in your tag.
但是我找不到使用自定义控件的任何示例。你如何获得播放按钮?
解决方法
你创建你的元素如此…
<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,你很好去!