vue - audio标签
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标签的更多相关文章
- HTML5的Audio标签打造WEB音频播放器
目前,WEB页面上没有标准的方式来播放音频文件,大多数的音频文件是使用插件来播放,而众多浏览器都使用了不同的插件.而HTML5的到来,给我们提供了一个标准的方式来播放WEB中的音频文件,用户不再为浏览 ...
- 论HTML5 Audio 标签歌词同步的实现
HTML5草案里面其实有原生的字幕标签(<track> Tag)的,但使用的是vtt格式的文件,非常规的字幕(.sub, .srt)或歌词文件(.lrc). 用法如下(代码来自W3Scho ...
- 关于HTML5音频——audio标签和Web Audio API各平台浏览器的支持情况
对比audio标签 和 Web Audio API 各平台浏览器的支持情况: audio element Web Audio API desktop browsers Chrome 14 Yes ...
- 使用audio标签播放音频文件
HTML5定义了一个新的元素用来指定标准的方式来插入音频文件到web页面中:<audio>标签.使用audio标签可以控制音频的播放与停止,循环播放与播放次数设置,以及播放位置等等. 例如 ...
- H5页面实现一个Audio标签加载多个音频文件,并进行播放和展示音频长度
最近微信项目中有需求,要将微信端发送过来的amr格式的语音文件,在项目中的页面上进行展示和播放,实现方式如下: 1.首先java后台收到微信端的消息推送的时候,使用 ffmpeg将amr格式的音频文件 ...
- <video>和<audio>标签
一.<video>基本格式: <video width=" " heigh="" src=""> </vide ...
- HTML5 <Audio/>标签Api整理(二)
1.实例2: 相对较完整 Html代码: <style> #volumeSlider .slider-selection { background:#bababa; } </styl ...
- HTML5 <Audio>标签API整理(一)
简单实例: <audio id="myAudio"></audio> <script> var myAudio = document.getEl ...
- 关于HTML5中audio标签在手机中的autoplay
这个问题是我最头疼的: 问题描述:在开发手机网页的时候,苹果和三星的一些浏览器不能自动开始播放 解决办法:在这个页面上弹出一个层来触发audio标签的play()方法,或者你还可以 谷歌一下----& ...
随机推荐
- smokeping网络监控
一.smokeping介绍 我们在选择机房的时候,如何知道这个机房的网络情况,这个时候就要用到网络监控软件:smokeping 本文主要介绍如何使用smokeping来监控idc机房的网络质量情况,从 ...
- IOS Vsync
vsync count Don't Sync Application.targetFrameRate 设置FPS上限 Every Second VBlank 30 Every VBlank 60 An ...
- Calendar抽象类返回自己和Integer.TYPE和int.class
public class Calend { public static void main(String[] args) { Calendar cal=Calendar.getInstance();/ ...
- solr6.6 配置拼音分词
参考:solr6.6 配置同义词 1.下载拼音分析包 下载地址:pinyin.zip 解压后放在core下面的lib文件夹下面: 2.修改managed-schema配置文件 <fieldTyp ...
- 【Cocos2d-x 3.0 基础系列一】 各类回调函数写法汇总
一.button回调 1. Lambda 表达式,C++11 Lambda 赋予了Cocos2d-x 3.0创建回调函数的灵活性. auto itemNor = Sprite::create(&quo ...
- 【招聘App】—— React/Nodejs/MongoDB全栈项目:登录注册
前言:最近在学习Redux+react+Router+Nodejs全栈开发高级课程,这里对实践过程作个记录,方便自己和大家翻阅.最终成果github地址:https://github.com/66We ...
- IDEA+MAVEN+testNG(reportNG)
转载:http://www.cnblogs.com/aikachin/p/7765846.html 参考: http://blog.csdn.net/langsand/article/details/ ...
- 用C++实现Huffman文件编码和解码(2 总结)
这个是代码是昨天写完的,一开始的时候还出了点小bug,这个bug在晚上去吃饭的路上想明白的,回来更改之后运行立刻完成最后一步,大获成功. 简单说下huffman编码和文件压缩主要的技术. Huffma ...
- 游戏AI的综合设计
原地址:http://www.cnblogs.com/cocoaleaves/archive/2009/03/23/1419346.html 学校的MSTC要出杂志,第一期做游戏专题,我写了一下AI, ...
- Django——如何在Django模板中注入全局变量?——part2
模版中的变量由context中的值来替换,如果在多个页面模版中含有相同的变量,比如:每个页面都需要{{user}},笨办法就是在每个页面的请求视图中都把user放到context中. from d ...