2014级HTML5方向-HTML5基础
2016-9-4 10:29
<!DOCTYPE html> <html> <head> <title>音乐播放器</title> <meta name="viewport" content="width=device-wid...
我认为不是一种好的体验。 这样很有可能造成用户的不便。首先，嵌入音频并自动播放，很少可能正好是用户喜欢的，乐意的。其次，可能用户当时不方便有声音的传入。比如在公共场所。最后，自动播放，说明很有可能，停止键/播放键在不明显的地方，带来不便。
不是一种好的体验，有时候用户不需要收听或者对音频根本不感兴趣，所以有时候音频播放会对用户造成困扰，而且如果用户是用手机流量登陆的话会消耗很多的流量，给用户造成损失，所以不是一种好的体验。
<!DOCTYPE html> <html> <head> <title>音乐播放器</title> <meta name="viewport" content...
<!DOCTYPE html> <html> <head> <title>音乐播放器</title> <meta name="viewport" conte...
<!DOCTYPE html> <html> <head> <title>音乐播放器</title> <meta name="viewport" content="width=device-wid...
<!DOCTYPE html> <html> <head> <title>音乐播放器</title> <meta name="viewport" conte...
<!DOCTYPE html> <html> <head> <title>音乐播放器</title> <meta name="viewport" content...
是，这样缓冲速度快，可以减少等待时间。
<!DOCTYPE html> <html> <head> <title>音乐播放器</title> <meta name="viewport" content...
<!DOCTYPE html>
<html>
<head>
<title>音乐播放器</title>
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.mobile-1.2.0.js"></script>
<script>
$(function(){
//播放器样式设置
playwidth = $(window).width();
outerwidth = playwidth*0.9;
$("#outer").css('width',outerwidth);
$("#rate").css('width',outerwidth*0.6);
$("#ratetime").css('width',outerwidth*0.1);
//设置内容区域的高度，确保播放区域位于页面靠下位置
$("#content").css('height',$(window).height()*0.75);
//获取audio元素
var audio = document.getElementById("audios");
$("#content a").click(function(){
var text = $(this).text();//获取文字是播放还是停止
if(text=="播放"){
//选中哪首音乐哪首音乐开始播放
var which = $(this).attr('href');
audio.src = which;
audio.play();
//文字变成“停止”
$("#content a").text("播放");
$(this).text("停止");
//音乐播放器按钮图标变成“暂停”图标
//设置播放状态背景图片位置为（-70px -25px）
$("#playp").css('background-position','-70px -25px');
var timer=setInterval(function(){
var total=audio.duration;
var now=audio.currentTime;
//播放进度随时显示
var progress=now/total;
var width=progress*($("#rate").width());
$("#ratemid").css('width',parseInt(width));
//播放时间的提示更新
var totalTime=(total/60).toFixed(2);
var nowTime=(now/60).toFixed(2);
$("#ratetime").text(nowTime+'/'+totalTime);
},1000)
//点击暂停按钮
$("#playp").click(function(){
audio.pause();
$("#playp").css('background-position','-50px -25px');
});
//快进、快退
$("#next").click(function(){
audio.currentTime=audio.currentTime+4;
});
$("#prv").click(function(){
audio.currentTime=audio.currentTime-4;
});
}else{
$(this).text("播放");
audio.pause();
clearInterval(timer);
$("#playp").css('background-position','-50px -25px');
//点击开始按钮
$("#playp").click(function(){
audio.play();
$("#playp").css('background-position','-70px -25px');
});
//快进、快退
$("#next").click(function(){
audio.currentTime=audio.currentTime+4;
});
$("#prv").click(function(){
audio.currentTime=audio.currentTime-4;
});
}
return false;
});
//若链接文字是“播放”，单击时
});
</script>
<style>
</style>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fullscreen">
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active">在线音乐</a></li>
<li><a href="#">本地音乐</a></li>
</ul>
</div>
</div><!-- /header -->
<div data-role="content" id="content" >
<div>
<div style="float:left;width:80%;height:30px;font:12px;">千千阙歌</div>
<div style="float:left;width:20%;height:30px;font:12px;">
<a href='music/02.mp3' id='play'>播放</a>
</div>
</div>
<div>
<div style="float:left;width:80%;height:30px;font:12px;">思念人之屋</div>
<div style="float:left;width:20%;height:30px;font:12px;">
<a href='music/01.mp3' id='play'>播放</a>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="ui-bar">
<audio src="music/02.mp3" id='audios' ></audio>
<!-- 播放器外边框 -->
<div id="outer">
<!-- 播放器控制区域: 上一首 下一首 播放 暂停 -->
<div id="control">
<div id="prv"> </div>
<div id="playp" class='ply'></div>
<div id="next"> </div>
</div>
<!-- 播放器控制区域结束 -->
<!-- 播放进度-->
<div id="rate">
<div id="ratetop"></div>
<div id="ratemid"></div>
<div id="ratemidtop"> </div>
<div id="ratebom"></div>
</div>
<!-- 播放进度结束-->
<div id="ratetime">
</div>
<!-- 音量-->
<div id="volume"></div>
<!-- 音量结束-->
</div>
<!-- 播放器外边框结束 -->
</div>
</div><!-- /page -->
</body>
</html>
在网站中嵌入音频并自动播放，打破了以往单一的浏览网站，使用户在听觉上视觉上都有了不同的体验，既有音乐的播放，也有视频的播放，使网站的内容变得更加丰富，用户对网站中也有了不一样的感受。并且在html5中，为添加音频设置了专门的标签，为制作网站提供了更大的便捷度。因此，在网站中...
<!DOCTYPE html> <html> <head> <title>音乐播放器</title> <meta name="viewport" content="width=device-wid...
在网站中嵌入音频并自动播放（常见于博客）不是一种好的用户体验 因为很多时候用户并不需要音频的播放
<!DOCTYPE html> <html> <head> <title>音乐播放器</title> <meta name="viewport" content="width=device-wid...
答：我认为在网站中嵌入音频并自动播放不是一种好的用户体验。因为有的时候人们并不想观看该视频或对该视频内容不感兴趣，如果自动播放有可能会造成困扰。如果用手机登录该网站，自动播放可能会造成流量的大量流失，不利于用户使用。并且视频一般含有一系列广告，容易出现一些不健康的广告，会使...
是，可以让用户体验到该网站所想表达内容，更好的理解和感受网站
<!DOCTYPE html> <html> <head> <title>音乐播放器</title> <meta name="viewport" content="widt...
<!DOCTYPE html> <html> <head> <title>音乐播放器</title> <meta name="viewport" content="width=device-wid...
我认为在网站中嵌入音频并自动播放并不是一种很好的用户体验，嵌入音频需要加入一定量的代码，可能会对网站的加载速度产生影响，并且加入音频后可能会影响个人正在听的音乐或视频，给人造成困扰。
<!DOCTYPE html> <html> <head> <title>音乐播放器</title> <meta name="viewport" content="width=device-wid...
是不是好的用户体验还是要分情况的。通常如果要形成好的用户体验，则需要嵌入的最好是和内容接近的曲子，但是对于不同的用户喜好也不同，在不同种类的网站的不同分区的用户喜好不同，这个时候就需要作者的经验了，好的背景音乐可以带来很好的阅读享受。另外一方面，有的时候用户并不希望有声音从...
1、嵌入音频的作用：让用户在浏览网站的同时，获得更好的用户体验，可以对企业产品、服务、形象进行更深入地宣传介绍。 2、正确地嵌入音频，能够让用户浏览网站的时候觉得舒服，但是相反添加了和自己网站、用户不合适的音频则会让用户体验下降，比如： 打开音频网站时却又同时听到网站上的自...
我觉得博客，空间中嵌入的音频（多为博主喜欢的歌曲或舒缓身心的轻音乐）对浏览此网站的用户来说是一种不错的体验，可以在浏览文字寻找自己喜好的同时用音乐放松身心。 但是有一些网站做的广告推广，比如打开一个网站之后屏幕充满了小广告的窗口，并且有广告的音频自动播放，对用户来...
我认为不是。 首先是环境问题，用户如果在安静环境下打开，会影响自己和别人的使用 其次是突然播放音乐可能会影响用户心情和使用感 所以我认为在网站中嵌入音频并自动播放不是一种好的用户体验，如果嵌入音频应该显示音频控件让用户自由选择是否播放。
已完成
我个人认为在网站中潜入音频并且自动播放是一种很好的用户体验。这种方法刚开始应用于QQ空间和博客，例如在空间中，只要添加了播放器和背景音乐，在打开页面的时候就会自动播放音乐，更能体现个人特点。现在，微信中推送的某些网站类型的广告也会嵌入音频，可以更好地宣传产品。
<!DOCTYPE html> <html> <head> <title>音乐播放器</title> <meta name="viewport" content...
答：我感觉在网站中嵌入音频并自动播放（常见于博客）不是一种很好的用户体验。正确地添加背景音乐，能够让用户浏览网站的时候觉得舒服，相反添加了和自己网站、用户不合适的音乐则会让用户反感。1、背景音乐是需要加入代码，对网站速度有一定的影响；2、网站不是一个人看的，你喜欢的音乐...
是一种好的用户体验，在网页中嵌入音频并自动播放，提高了网站与用户的交互，丰富了网站的功能，提高了用户的视听效果，达到了很好的听觉体验。