<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>hello</title>
<link rel="stylesheet" type="text/css" href="http://s0.ifengimg.com/2017/04/24/style_2fb9e29e.css">
<script src="http://s0.ifengimg.com/2017/01/06/zepto.min_0089cfa1.js"></script>
<script>
document.documentElement.style.fontSize = document.documentElement.clientWidth/7.5+'px';
</script>
</head>
<body>
<section class="wrap" style="transform: translate3d(0, 0, 0);-webkit-transform: translate3d(0, 0, 0);">
<div class="content">
<!--banner与滚动新闻-->
<div class="top">
<img class="banner" src="http://s0.ifengimg.com/2017/04/20/banner_4a8d8b3b.jpg" alt="" >
<div class="newScroll">
<div id="audioBtn0" class="audios"><img src="http://s0.ifengimg.com/2016/12/08/play_456a0994.gif" alt=""></div>
<dl>
<dt>翔海房产携金域蓝湾荣耀登陆北京</dt>
<dd class="mainNewsScroll-list">
<ul>
<li id="audioCon0">翔海房产携金域蓝湾荣耀登陆北京翔海房产携金域蓝湾荣耀登陆北京翔海房产携金域蓝湾荣耀登陆北京11</li>
</ul>
</dd>
</dl>
</div>
<!--凤凰头条-->
<h3 class="h3 headline"></h3>
<div>
<dl class="headList">
<dt>标题标题标题标题标题标题</dt>
<dd>
<span id="audioBtn1" class="audios"></span>
<p id="audioCon1">11111111111111111111111111111111111111111111</p>
</dd>
</dl>
<dl class="headList">
<dt>标题标题标题标题标题标题</dt>
<dd>
<span id="audioBtn2" class="audios"></span>
<p id="audioCon2">222222222222222222222222222222222</p>
</dd>
</dl>
<dl class="headList">
<dt>标题标题标题标题标题标题</dt>
<dd>
<span id="audioBtn3" class="audios"></span>
<p id="audioCon3">333333333333333333333333333333</p>
</dd>
</dl>
</div>
</div>
</div>
</section>
<textarea id="wow" style="display: none"></textarea>
<script>
$(function(){
function baiduAudio(musicH5, words){
this.id=musicH5;
this.musicH5 = document.getElementById(musicH5);
this.words = document.getElementById(words);
this.activePlayer = null;
this.embed = null;
this.name = null;
this.audio = null;
this.content = null;
this.Mp3Url = null;
this.isPlay = false;
this.baiduUrl = "http://tts.baidu.com/text2audio";
this.wow = document.getElementById("wow");
}
baiduAudio.prototype = {
init: function(){
var me = this;
me.play();
me.musicH5.onclick = function(event){//开关控制
if(me.isPlay){
me.activePlayer.pause();
me.isPlay = false;
me.musicH5.className = "";
}else{
me.activePlayer.play();
me.isPlay = true;
me.musicH5.className = "current";
}
me.wow.value = me.activePlayer.src;
};
//切换时关闭语音
$('.audios').on('click',function(){
if($(this).attr('id')!== me.id){
me.activePlayer.pause();
}
})
},
getMp3Url: function(){//百度请求数据返回mp3链接
this.content = this.words.innerHTML;
return this.baiduUrl + "?idx=1" + "&tex=" + encodeURIComponent(encodeURIComponent(this.content)) + "&cuid=baidu_speech_demo" + "&cod=2" + "&lan=zh&ctp=1" + "&pdt=1" + "&spd=5&per=3&vol=5&pit=5"
},
playForNoH5: function(){//embed
var me = this;
me.activePlayer && (me.activePlayer.pause()/*, $(activePlayer).remove()*/);
me.name = "j-embed-" + (new Date - 0);
me.embed = document.createElement('embed');
me.embed.id = me.name;
me.wow.value = me.Mp3Url;
me.embed.src = me.Mp3Url;
me.embed.autostart = false ;
me.musicH5.appendChild(me.embed);
me.activePlayer = document.getElementById(me.name);
//me.active();
},
playForH5: function(){//H5
var me = this;
me.activePlayer && me.activePlayer.pause();
me.audio = new Audio(me.Mp3Url);
me.activePlayer = me.audio,
me.audio.src = me.Mp3Url;
me.active();
},
active: function(){//监听播放状态
var me = this;
me.activePlayer.onpause = function(){//暂停
me.musicH5.className = "";
me.isPlay = false;
};
me.activePlayer.onended = function() {//结束
me.musicH5.className = "";
me.isPlay = false;
};
me.activePlayer.onplaying = function() {//播放
me.musicH5.className = "current";
me.isPlay = true;
};
//me.activePlayer.play();
},
play: function(){//执行
this.Mp3Url = this.getMp3Url();
document.createElement("audio").canPlayType && document.createElement("audio").canPlayType("audio/mpeg") ? this.playForH5() : this.playForNoH5()
},
pause: function(){
me.activePlayer && me.activePlayer.pause && me.activePlayer.pause();
}
};
//音频播放
var arrs=[];
for(var i=0;i<$('.audios').length;i++){
arrs.push(new baiduAudio("audioBtn"+i, "audioCon"+i));
arrs[i].init();
}
});
</script>
</body>
</html>
