Html 5音频标签自定义控件？ [英] Html 5 audio tag custom controls?

问题描述

我觉得我在这里疯狂吃药，因为我无法弄清楚如何使用自定义控件呈现html 5音频标签。

我有这个html到目前为止，它没有任何问题：

 < audio controls preload ='none'>< source src ='音频的网址'type ='audio / wav'/>< / audio> 
  

如何让它只显示播放按钮，或者在播放时显示暂停按钮在它的位置。

从我读到的，

默认情况下， element不会暴露任何类型的玩家控件。
您可以使用普通的旧HTML，CSS和
JavaScript创建自己的控件。该元素具有play（）和pause（）等方法以及名为currentTime的
读/写属性。还有读/写
音量和静音属性。所以你真的拥有了所有你需要的东西来构建你自己的界面。
$ b $ pre $ 如果你不想构建你的界面自己的界面，你可以告诉


浏览器显示一组内置控件。要做到这一点，只需
包含您的标记中的控件属性。

但我找不到任何使用自定义控制。你如何得到播放按钮？

解决方案

你创建你的元素......

 < audio id =yourAudiopreload ='none'> 
< source src ='音频的网址'type ='audio / wav'/> 
< / audio> 
< a href =＃id =audioControl> play！< / a> 
  

并添加一些功能：

  var yourAudio = document.getElementById（'yourAudio'），
 ctrl = document.getElementById（'audioControl'）; 
 
 ctrl.onclick = function（）{
 
 //更新按钮
 var pause = ctrl.innerHTML ==='pause！'; 
 ctrl.innerHTML =暂停？ '玩！'：'停顿！'; 
 
 //更新音频
 var method = pause？ '暂停'：'玩'; 
 yourAudio [method]（）; 
 
 //防止默认操作
返回false; 
}; 
  

现在，按钮只是简单的文本（play！或pause！）但你可以用CSS做任何你想做的事情。而不是设置 innerHTML ，请设置 className ，您可以轻松前往！

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.

I have this html so far, and it works no problem:

<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.

But I can not find any examples of using custom controls. How do you get just the play button?

解决方案

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 className and you're good to go!

这篇关于Html 5音频标签自定义控件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！