audio 标签

<audio :src="current_music" autoplay controls autoloop  @end="next_song"></audio>

@ended = 'nextSong()

一首音乐播放结束后的时间是ended

autoplay 自动播放

controls 显示暂停,进度,音量下载等

<script>
var songs = [
{id:1,src:'./audios/1.mp3',name:"la la Land",author:'Ryan'},
{id:2,src:'./audios/2.mp3',name:"The Best of",author:'Skillof'},
{id:3,src:'./audios/3.mp3',name:"It My Life",author:'Bon'},
{id:4,src:'./audios/4.mp3',name:"Tender",author:'Blur'}]; var v1 = new Vue(
{
el:"#music", data:{
songs:songs,
index:0,
current_music:'./audios/1.mp3'
},
methods:{
next_song:function(){
this.index++;
this.index= this.index===this.songs.length?0:this.index;
this.current_music=this.songs[this.index].src
},
last_song:function(){
this.index--;
this.index = this.index<0? this.songs.length-1:this.index;
this.current_music=this.songs[this.index].src
},
singing:function(i){
this.index=i;
this.current_music=this.songs[i].src
}
}
}
)
</script>

vue - audio标签的更多相关文章

  1. HTML5的Audio标签打造WEB音频播放器

    目前,WEB页面上没有标准的方式来播放音频文件,大多数的音频文件是使用插件来播放,而众多浏览器都使用了不同的插件.而HTML5的到来,给我们提供了一个标准的方式来播放WEB中的音频文件,用户不再为浏览 ...

  2. 论HTML5 Audio 标签歌词同步的实现

    HTML5草案里面其实有原生的字幕标签(<track> Tag)的,但使用的是vtt格式的文件,非常规的字幕(.sub, .srt)或歌词文件(.lrc). 用法如下(代码来自W3Scho ...

  3. 关于HTML5音频——audio标签和Web Audio API各平台浏览器的支持情况

    对比audio标签 和 Web Audio API 各平台浏览器的支持情况:   audio element Web Audio API desktop browsers Chrome 14 Yes  ...

  4. 使用audio标签播放音频文件

    HTML5定义了一个新的元素用来指定标准的方式来插入音频文件到web页面中:<audio>标签.使用audio标签可以控制音频的播放与停止,循环播放与播放次数设置,以及播放位置等等. 例如 ...

  5. H5页面实现一个Audio标签加载多个音频文件,并进行播放和展示音频长度

    最近微信项目中有需求,要将微信端发送过来的amr格式的语音文件,在项目中的页面上进行展示和播放,实现方式如下: 1.首先java后台收到微信端的消息推送的时候,使用 ffmpeg将amr格式的音频文件 ...

  6. <video>和<audio>标签

    一.<video>基本格式: <video width=" " heigh="" src=""> </vide ...

  7. HTML5 <Audio/>标签Api整理(二)

    1.实例2: 相对较完整 Html代码: <style> #volumeSlider .slider-selection { background:#bababa; } </styl ...

  8. HTML5 <Audio>标签API整理(一)

    简单实例: <audio id="myAudio"></audio> <script> var myAudio = document.getEl ...

  9. 关于HTML5中audio标签在手机中的autoplay

    这个问题是我最头疼的: 问题描述:在开发手机网页的时候,苹果和三星的一些浏览器不能自动开始播放 解决办法:在这个页面上弹出一个层来触发audio标签的play()方法,或者你还可以 谷歌一下----& ...

随机推荐

  1. MooseFS分布式文件系统介绍及安装教程详解

    MFS系统由4个部分构成:master.metalogger.chunkserver.client. 1.Master —— mfs的大脑,记录着管理信息,比如:文件大小,存储的位置,份数等,和inn ...

  2. centos7 iptables和firewalld学习记录

    centos7系统使用firewalld服务替代了iptables服务,但是依然可以使用iptables来管理内核的netfilter 但其实iptables服务和firewalld服务都不是真正的防 ...

  3. php中将SimpleXMLElement Object数组转化为普通数组

    做微信开发,鉴于微信POST的消息是XML数据包,通过SimpleXMLElement Object获取的数据不好操作,需要转化为普通数组. 网上找了很多方法都不理想,发现通过json_decode和 ...

  4. redis学习笔记——应用场景

    最近在看redis入门指南,现在就自己的学习情况说说自己的理解. 字符串类型(String) 字符串类型是Redis中最基本的类型,能存储任意形式的字符串,包括二进制数据.如一张照片也可以用字符串类型 ...

  5. Python闭包的高级应用-装饰器的实现

    我们先看一个闭包的例子: from time import ctime def before_call(f): def wrapped(*args, **kargs): print 'before c ...

  6. FastGUI for NGUI教程

    原地址:http://blog.csdn.net/asd237241291/article/details/8499430 FastGUI是NGUI的一个扩展,所以必须要有NGUI才能使用.FastG ...

  7. 解决Odoo访问fonts.googleapis.com导致速度慢的问题

    Odoo中有些css文件引用了谷歌字体,但因为谷歌服务器被墙,导致部分页面加载受影响. 解决方法如下: 360网站卫士常用前端公共库CDN服务把谷歌字体库都存到它的CDN上了,因此我们只需把样式表中谷 ...

  8. 在ubuntu10.04 下将360wifi当无线网卡使用

    通过百度“360wifi linux“ 已经有很多解决方案.主要过程是从网上下载mt7601驱动包,编译出一个内核模块后,再通过modprobe 添加模块.下面描述的是基于我本机的特点所做的额外工作. ...

  9. Android-LinearLayout布局技巧(一)

    先看2张图 一.5.1寸 二.3.7寸 三.代码 <?xml version="1.0" encoding="utf-8"?> <Linear ...

  10. Visual studio C++ MFC之树形控件Tree Control

    背景 本篇旨在MSDN帮助文档下总结树形控件Tree Control的使用,并列出碰到的具体问题. 正文 树形控件Tree Control的类则是CTreeCtrl,具体成员对象详见链接,以下则描述一 ...