js实现在线音频播放(apache+ajax)

步骤1：开启apache服务

步骤2：页面布局

  <div class="box">
   <!-- 搜索框 -->
   <div class="searchArea">
    <input type="text" class="search" value="">
    <button class="goSearch">搜索</button>
   </div>
   <!-- 显示歌词列表 -->
   <div class="songsArea">
    <ul>
     <li></li>
    </ul>
   </div>
   <!-- 音频区域 -->
   <div class="audioArea">
    <audio src=""  controls="controls" autoplay="autoplay">
     当前浏览器不支持audio
    </audio>
   </div>
  </div>

步骤3：运行HTML文件

在apache目录下新建onlinemusic文件夹，在此文件夹新建index.html

在浏览器中输入：http://localhost:8080/onlinemusic/index.html

步骤3：利用Ajax搜索歌曲

  let search=document.getElementsByClassName('goSearch')[0]
  console.log(search)
  search.addEventListener('click',function(){
   let inputValue=document.getElementsByTagName('input')[0].value
   // console.log(inputValue)
   getMusic(inputValue);
   console.log('---end---')
  })

  function getMusic(songname){
   let xmlhttp=null;
   if (window.XMLHttpRequest) {
       // 用于现代浏览器的代码
        xmlhttp = new XMLHttpRequest();
    } else {
       // 应对老版本 IE 浏览器的代码
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open('GET','https://api.zsfmyz.top/music/list?p=1&n=30&w='+songname,true)
    xmlhttp.send()
    xmlhttp.onreadystatechange=function(){
     if(xmlhttp.readyState==4){
      if(xmlhttp.status==200||xmlhttp.status==304){
      //  console.log(JSON.parse(xmlhttp.responseText))
       let data=JSON.parse(xmlhttp.responseText)
       let songs=data.data.list
       console.log( songs)
       let songList=document.getElementById('songs')
       let str=''
      //  let oli=songList.createElement('li')
       for(let i=0;i<songs.length;i++){
       str+='<li>'+songs[i]['songname']+'--<span>'+songs[i]['singer'].name+'</span>'+'</li>'
       }
       songList.innerHTML=str
      }else{
       console.log('innerError')
      }
     }
    }
  }

步骤4：修改歌曲显示样式

模板字符串的使用

str+=`<li>
<span class="songname">${songs[i]['songname']}</span>--
<span class="singer">${songs[i]['singer'].name}</span>--
<span class="songmid">${songs[i]['songmid']}</span>
</li>`

获取span中样式visiblity为hidden的文本值

    oli=document.querySelectorAll('li')
    console.log(oli)
    for(let i=0;i<oli.length;i++){
     oli[i].onclick=function(e){
      e.stopPropagation()
      e.cancelBubble=true
      console.log(e.target.children[2].textContent)
      let songmid=e.target.children[2].textContent
      setTimeout(() => {
       getSongUrl(songmid)
      },1000)
     }
    }

在一行内显示，若超过一行则使用…来表示

   .songsArea li{
    font-size: 12px;
    height: 25px;
    width: 100%;
    line-height: 25px;
    white-space: nowrap;
    padding-left: 10px;
    border-bottom: 1px solid black;
   }
   li span{
    text-overflow:'...';
   }

步骤5：获取歌曲音源播放

// 根据歌曲id来获取音源
function getSongUrl(songmid){
    let oajax=null
    if(window.XMLHttpRequest){
        oajax=new XMLHttpRequest()
    }else{
        oajax=new ActiveXObject('Microsoft.XMLHTTP')
    }
    let url='https://api.zsfmyz.top/music/song?songmid='
    oajax.open('get',url+songmid+'&guid=126548448',true)
    oajax.send()
    oajax.onreadystatechange=function(){
        if(oajax.readyState==4){
            if(oajax.status==200||oajax.status==304){
    console.log(oajax.responseText)
    let data=JSON.parse(oajax.responseText)
    let musicUrl=data['data']['musicUrl']
    console.log(data)
    console.log(musicUrl)
    let audio=document.getElementsByTagName('audio')[0]
    audio.src=musicUrl
            }else{
                console.log('inn-Error')
            }
        }
    }
}