html5 – Html 5音频标签自定义控件？

我觉得我在这里吃疯狂的药丸，因为我无法弄清楚如何使用自定义控件渲染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.@H_403_12@ You can create your own controls with plain old HTML,CSS,and@H_403_12@ JavaScript. The element has methods like play() and pause() and a@H_403_12@ read/write property called currentTime. There are also read/write@H_403_12@ volume and muted properties. So you really have everything you need to@H_403_12@ build your own interface.

06001

browser to display a built-in set of controls. To do this,just@H_403_12@ 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，你很好去！

原文链接：https://www.f2er.com/html5/169241.html

html5 – Html 5音频标签自定义控件？

解决方法

猜你在找的HTML5相关文章