HTML5的一些新令人兴奋的功能是音频和视频标签。从长期来看,这可能是替换视频级别的闪光。我想在我的一个体验项目中使用音频标记,几乎没有关于如何操纵音频标签的信息,并因此提出了一个初学指南。

有一件事明确就是这仍然是一个早期的实现,这也意味着它有点越野车。我有一个奇怪的错误,如果我有一首歌播放并且同时有javascript抛出错误(不合在一起),我无法终止这首歌。关闭标签不会阻止它,我必须重新启动Firefox。这让我认为这个过程仍然没有完全链接到标签(至少在Firefox中)。

我在我的演示中使用了jQuery,因为我正在开发的应用程序被包裹,但这不是必需的。

查看演示
(仅由5个按钮组成)

我学到的是

API有点易于使用,因为它应该,play(),暂停(),想要停止卷? iscoveLement.volume = 0。想在55秒开始玩吗? andemelement.currentime = 55.相当酷的东西。

使用简单的控制=自动添加默认的HTML音频播放器控件=”true”,它有良好和坏的一面。你不’T必须担心它,但与此同时,现在,您无法修改播放器风格。此外,当您右键单击时,您还可以在漂亮的上下文菜单中,您可以在ff3.5中保存文件。

正常的音频标签

通过JavaScript添加并播放声音

var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'loading.ogg');
audioElement.play();

获取歌曲FILEPATH和持续时间

声音的Element.src;
audioElement.duration;

加载声音

var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'Mogwai2009-04-29_acidjack_t16.ogg');
audioElement.load()
audioElement.addEventListener("load", function() { 
  audioElement.play(); 
  $(".duration span").html(audioElement.duration);
  $(".filename span").html(audioElement.src);
}, true);

stop

声音的Element.pause();

更改卷

声音的Element.volume=0;

在歌曲中恰好播放35秒

声音的Element.currentTime=35;
audioElement.play();

坏部分

没有停止(),只暂停(),我真的不知道是什么阻止它们在API中放置stop()。
没办法得到歌曲的名字。
唯一的可访问格式是OGG和WAV,没有MP3 Love。这也意味着您必须在OGG中转换所有声音。
正如我所说的那样,这是一个有点越野,但可以理解,规格甚至没有完成。
Microsoft可能会在2022年实现音频和视频标记。

好的部分

API易于使用,您可以在任何时候都有歌曲。
您无需在HTML主体中解析音频对象,您可以直接在脚本中播放。
到底,我’我真的很高兴这是如何结果的。

下载源代码 查看演示

测试:
Firefox 3.5.

ressources.

http://hacks.mozilla.org/2009/06/exploring-music-audio/
//developer.mozilla.org/en/Using_audio_and_video_in_Firefox
http://webkit.org/blog/140/html5-media-support/

广告
注册 tesking E20-322 在线课程,以了解网络开发的最新技能。获取有关HTLM功能和功能的完整信息 tesking 646-276. html tonurials和 tesking ns0-163. study guide.

68 thoughts on “HTML5 Audio Tag介绍JavaScript操作

    1. 简单的!
      步骤1:
      创建一个新的音频对象。

      audio = $(”, {
      ‘loop’ : ‘loop’,
      ‘autoplay’ : ‘autoplay’
      });

      第2步:
      而不是检查它是否可以通过执行播放mp3

      (音频[0] .canplaytype(‘audio/mpeg’)

      或者为ogg.

      (音频[0] .canplaytype(‘audio/ogg’)

      第3步:
      如果它可以播放mp3,而不是加载mp3,或者比加载ogg

      最终代码

      ——beginCode—-
      audio = $(”, {
      ‘loop’ : ‘loop’,
      ‘autoplay’ : ‘autoplay’
      });

      if(音频[0] .canplaytype(‘audio/mpeg’)){
      $(”, {
      ‘src’ : ‘/audio/le.mp3’,
      ‘type’ : ‘audio/mpeg’
      }).appendTo(audio);
      }
      if(音频[0] .canplaytype(‘audio/ogg’)){
      $(”, {
      ‘src’ : ‘/audio/le.og’,
      ‘type’ : ‘audio/mpeg’
      }).appendTo(audio);
      }
      —– endOfCode—–

  1. 嗨,标签在Firefox为我工作正常,但在Windows上播放器控件看起来像“falling”按下播放后向下大约20个像素,此后会导致按下暂停的麻烦,因为不明显识别按钮位置。如何让控件保持在同一位置,就像它发生在Safari或Chrome中,甚至在Mac OS X上的Firefox中?
    谢谢

  2. 我下载了CEDRIC提供的录音器并将其复制到我的网站。该页面在演示中加载,但不同之处在于我不’在我的网站上听到任何东西。我在我的Windows 7笔记本电脑中使用Firefox 6。

    1. 问题似乎是我的Goddady托管网站。我将奥波塔代码复制到我的个人网站并工作。 Goddady没有’t支持Java脚本?

  3. 不’t a simple
    audio.prototype.stop = function(){
    这个.Pause();
    this.currentime = 0;
    }

    作为未来的停止方法工作?

  4. 我这样做:

    函数playsound()
    {
    var audioElement = document.getElementById(‘alarm’);
    audioElement.play();
    }
    但“document.getElementById(‘alarm’)”选择器,杀死jquery选择器

    如果我使用这样的jQuery选择器:

    函数playsound()
    {
    var iscaveelement = $(‘#alarm’);
    audioElement.play();
    }
    或者

    函数playsound()
    {
    $(‘#alarm’).play();
    }

    然后它’s don’t work :/

    如何使用jQuery选择器使用它?

  5. 我发现..
    选择器:$(“#audio”)[0]

    功能:

    函数togglsound()
    {
    如果($(“#audio”)[0].paused)
    {
    $(“#audio”)[0].play();
    }别的
    {
    $(“#audio”)[0].pause();
    }
    }

    函数stopsound()
    {
    如果($(“#audio”)[0].played)
    {
    $(“#audio”)[0].pause();
    $(“#audio”)[0].currentTime=0;
    }
    }

    谢谢你的文章..

  6. 谢谢,这真的帮助了我。
    这里’s代码停止曲目:
    函数stop(){
    document.getElementById(“audio”).currentTime=0;
    document.getElementById(“audio”).pause();
    }
    It’非常简单,我知道,但我只是以为我’d share it.

  7. 停下来
    您可以像以下代码一样。

    功能停止()
    {
    myaudio.pause();
    myAudio.currentime = 0;
    }

评论被关闭。