四：音乐导航

页面效果
- 鼠标进入某个音符，有一个黄色块上移
- 为li元素添加鼠标进入事件，获取它的子元素span,修改span的样式
- 鼠标离开，将span的样式还原
音乐效果
- 索引对应，根据鼠标进入到li元素获取对应的索引播放音乐
- 涉及到多媒体api
  - play():播放音乐
  - load():加载音乐
添加按键事件：能够通过按下某些键也能触发鼠标进入和离开的操作
- 约定：按下1-7分别代表7个导航项
- 我怎么知道用户按下的是1-7呢？限制只有用户按下了1-7才进行处理
- 我要代码方式触发li元素的mouseenter事件
重点细节1：
- 音乐播放的时候，默认情况下，只有一个音乐播放完毕之后，才能播放下一个音乐
- 我们可以强制加载下一个音乐，通过load方法可以实现
重点细节2
- 如果按键太久不松开，就会造成load和play方法冲突，产生错误
- 解决
  - 只要你不松开，就不再进行处理
  - 按一次键，我只处理一次

错误信息 `1.DOMException: play() failed because the user didn't interact with the document first.

       play() 失败了  因为     这个  用户  没有  交互   和这个页面            首先

play方法执行失败了，因为用户没有首先和页面进行交互错误是谷歌浏览器的专有错误。经认为媒体操作必须有用户交互，否则不安全，我们先在页面的空白位置单击一下就可以解决这个问题

2.DOMException: The play() request was interrupted by a new load request

            这个  play  请求   已经被  中了       通过 一个 新的 load 请求
            play方法执行被中止了，它被一个新的load操作中止了

解决：不要按那么久`

let lis = document.querySelectorAll('li')
let audios = document.querySelectorAll('audio')

// 为所有li元素添加鼠标进入事件
lis.forEach(function(ele, index) {
    ele.addEventListener('mouseenter', function() {
        // 页面效果
        // 建议后期带单位
        ele.children[1].style.top = '0px'
        // 强制加载当前音乐，不管上一个是否播放完毕
        audios[index].load()
        // 播放音乐
        audios[index].play()
    })

    ele.addEventListener('mouseleave', function() {
        ele.children[1].style.top = '60px'
    })
})
 // 按键
let flag = true // 标记当前是否需要响应按键操作
document.addEventListener('keydown', function(e) {
    // 判断要不要进行本次按键操作的处理
    if (flag) {
        flag = false
        let index = e.key - 1
         // 限制用户知识按下1-7才处理
        if (index >= 0 && index < 7) {
          //之前可以通过代码的方式自动的触发元素的click事件
          //但是,非click不能这样简单的触发
          //我想触发元素的非click事件--下面是实现过程
          // 1.创建一个自定义事件对象,说明要触发的是事件中的元素的事件
            let ev = document.createEvent('HtmlEvents')
          // 2.进行事件的初始化:配置事件的属性,如事件类型,是否冒泡,是否能阻止默认行为
          // ev.initEvent('事件类型',是否允许冒泡,是否允许阻止默认行为) 
            ev.initEvent('mouseenter', true, true)
          // 3.触发事件--代码方式触发事件
          // 元素.dispatchEvent(自定义事件对象)
            lis[index].dispatchEvent(ev)
        }
    }
})
document.addEventListener('keyup', function(e) {
    let index = e.key - 1
    if (index >= 0 && index < 7) {
        // 将flag重置为true,这样就又可以响应按键事件了
        flag = true
        let ev = document.createEvent('HtmlEvents')
        ev.initEvent('mouseleave', true, true)
        lis[index].dispatchEvent(ev)
    }
})

Webapi-案例（音乐导航）

四：音乐导航