将鼠标悬停在特定对象上时播放声音文件

Playing soundfile when hovering over specific object

谁能理解我做错了什么? 此代码 returns 错误“songs is not a function”。

<div id="song1" class="song">
    <p>some text</p>
</div>
<div id="song2" class="song">
    <p>some text</p>
</div>
<div id="song3" class="song">
    <p>some text</p>
</div>
const songs = {
    song1: '/media/title-song-lala.mp3',
    song2: '/media/pva.mp3',
    song3: '/media/zjklf.mp3'
};

$('.song').hover(function() {
    let song = songs(this.id);
    createjs.Sound.play(song);
});

此致, 芥末的形状

问题在于您如何访问 object

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object

必须通过以下方式访问对象属性 songs.song1,或 songs['song1'],后者在 属性 的第一个字符是数字的情况下很有用你不能做 songs.1song,所以你必须像 songs['1song'] 那样做 - 当你想要获取的 属性 名称是一个变量时,它也很有用。

const songs = {
    song1: '/media/title-song-lala.mp3',
    song2: '/media/pva.mp3',
    song3: '/media/zjklf.mp3'
};

console.log(songs['song1']);

$('.song').hover(function() {
    let id = this.id;
    console.log(songs[id]);
    var audio = new Audio(songs[id]);
    audio.play();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="song1" class="song">
    <p>some text</p>
</div>
<div id="song2" class="song">
    <p>some text</p>
</div>
<div id="song3" class="song">
    <p>some text</p>
</div>

  1. 抱歉,我对对象语法错误感到不满意。它应该是 songs.key 而不是 songs(key).

  2. 代码仍然无效。我没有收到任何错误,但没有播放音频。

const songs = {
    song1: '/media/title-song-lala.mp3',
    song2: '/media/pva.mp3',
    song3: '/media/zjklf.mp3'
};

$('.song').hover(function() {
    let id = this.id
    var audio = new Audio(songs.id);
    audio.play();
});
<div id="song1" class="song">
    <p>some text</p>
</div>
<div id="song2" class="song">
    <p>some text</p>
</div>
<div id="song3" class="song">
    <p>some text</p>
</div>